javascript - escape - Cómo comparar una entidad html con jQuery

jquery decode html

Question

Tengo el siguiente código html:

<h3 id="headerid"><span onclick="expandCollapse(''headerid'')">&uArr;</span>Header title</h3>

Me gustaría alternar entre flecha arriba y flecha abajo cada vez que el usuario hace clic en la etiqueta span.

function expandCollapse(id) {
var arrow = $("#"+id+" span").html(); // I have tried with .text() too
if(arrow == "⇓") {
$("#"+id+" span").html("⇑");
} else {
$("#"+id+" span").html("⇓");
}
}

Mi función va siempre por la ruta else. Si hago un javacript: alerta de la variable arrow obtengo la entidad html representada como una flecha. ¿Cómo puedo decirle a jQuery que interprete la variable de arrow como una cadena y no como html?

Answer 1

Cuando se analiza el HTML, lo que JQuery ve en el DOM es una UPWARDS DOUBLE ARROW ("⇑"), no la referencia de la entidad. Por lo tanto, en su código JavaScript debe probar "⇑" o "/u21d1" . Además, debe cambiar lo que está cambiando a:

function expandCollapse(id) {
var arrow = $("#"+id+" span").html();
if(arrow == "/u21d1") {
$("#"+id+" span").html("/u21d3");
} else {
$("#"+id+" span").html("/u21d1");
}
}

Answer 2

Tal vez no esté obteniendo una coincidencia exacta porque el navegador tiene una entidad inferior o algo así. Intente usar un quilate (^) y minúscula "v" solo para probar.

Editado - Mi primera teoría fue completamente errónea.

Answer 3

Use una clase para indicar el estado actual del tramo. El html podría verse así

<h3 id="headerId"><span class="upArrow">&uArr;</span>Header title</h3>

Luego, en el javascript que haces

$( ''.upArrow, .downArrow'' ).click( function( span ) {
if ( span.hasClass( ''upArrow'' ) )
span.text( "⇓" );
else
span.text( "⇑" );
span.toggleClass( ''upArrow'' );
span.toggleClass( ''downArrow'' );
} );

Esta puede no ser la mejor manera, pero debería funcionar. No lo probé duro

Answer 4

Si haces una alerta de arrow ¿qué devuelve? ¿Devuelve la cadena exacta con la que estás haciendo coincidir? Si está obteniendo los caracteres reales ''⇓'' y ''⇑'' , puede que tenga que coincidir con "/u21D1" y "/u21D3" .

Además, es posible que desee probar ⇑ y ⇓ ya que no todos los navegadores soportan esas entidades.

Actualización : aquí hay un ejemplo completamente funcional: http://jsbin.com/edogop/3/edit#html,live

window.expandCollapse = function (id) {
var $arrowSpan = $("#" + id + " span"),
arrowCharCode = $arrowSpan.text().charCodeAt(0);
// 8659 is the unicode value of the html entity
if (arrowCharCode === 8659) {
$arrowSpan.html("⇑");
} else {
$arrowSpan.html("⇓");
}
// one liner:
//$("#" + id + " span").html( ($("#" + id + " span").text().charCodeAt(0) === 8659) ? "⇑" : "⇓" );
};

Answer 5

Mira el efecto de .toggle () .

Aquí hay algo similar con lo que estaba jugando antes.

HTML:

<div id="inplace">
<div id="myStatic">Hello World!</div>
<div id="myEdit" style="display: none">
<input id="myNewTxt" type="text" />
<input id="myOk" type="button" value="OK" />
<input id="myX" type="button" value="X" />
</div></div>

GUIÓN:

 $("#myStatic").bind("click", function(){
$("#myNewTxt").val($("#myStatic").text());
$("#myStatic,#myEdit").toggle();
});
$("#myOk").click(function(){
$("#myStatic").text($("#myNewTxt").val());
$("#myStatic,#myEdit").toggle();
});
$("#myX").click(function(){
$("#myStatic,#myEdit").toggle();
});