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();
 });