Cómo comparar una entidad HTML con jQuery

Question

tengo el siguiente código html:

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

me gustaría cambiar entre flecha hacia arriba y hacia abajo flecha 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 en 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 arrow como una cadena y no como html?

Answer 1

Cuando se analiza el HTML, lo que JQuery ve en el DOM es un UPWARDS DOUBLE ARROW ("⇑"), no la referencia de la entidad. Por lo tanto, en su código JavaScript debe probar "⇑" o "\u21d1". Además, es necesario 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

Echa un vistazo al efecto .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(); 
}); 

Answer 3

Tal vez usted no está consiguiendo una coincidencia exacta ya que el navegador es inferior carcasa de la entidad o algo así. Intente usar un quilate (^) y minúscula "v" solo para probar.

Editado - Mi primera teoría fue completamente incorrecta.

Answer 4

Si haces una alerta de arrow ¿qué volver? ¿Devuelve la cadena exacta con la que estás haciendo coincidir? Si obtiene 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 son compatibles con esas entidades.

actualización: aquí hay un ejemplo completamente de trabajo: 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

utilizar una clase para indicar el estado actual del tramo. El html podría tener este aspecto

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

Luego, en el código JavaScript que hace

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

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