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 alternar entre la flecha hacia arriba y la flecha hacia abajo cada vez que el usuario hace clic en la etiqueta de extensión.

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 siempre va por el otro camino.Si hago un javacript:alert de arrow variable. Obtengo la entidad html representada como una flecha.¿Cómo puedo decirle a jQuery que interprete el arrow variable 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, debes cambiar a qué estás cambiando:

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

Answer 2

Si haces una alerta de arrow ¿Qué devuelve?¿Devuelve la cadena exacta con la que estás comparando?Si obtienes los personajes reales '⇓' y '⇑' es posible que tengas que compararlo con "\u21D1" y "\u21D3".

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

Actualizar:Aquí hay un ejemplo completamente funcional:http://jsbin.com/edogop/3/edit#html,en vivo

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 3

Utilice una clase para señalar 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 lo haces

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

Puede que esta no sea la mejor manera, pero debería funcionar.No lo probé duro

Answer 4

Revisar la .palanca() efecto.

Aquí hay algo similar con el 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>

GUION:

 $("#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 5

Tal vez no obtenga una coincidencia exacta porque el navegador escribe la entidad en minúsculas o algo así.Intente usar un quilate (^) y una "v" minúscula solo para realizar pruebas.

Editado: mi primera teoría estaba completamente equivocada.