So vergleichen Sie eine HTML-Entität mit jQuery

Question

Ich habe den folgenden HTML-Code:

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

Ich möchte jedes Mal zwischen Aufwärtspfeil und Abwärtspfeil wechseln, wenn der Benutzer auf das Span-Tag klickt.

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

Meine Funktion geht immer den anderen Weg.Wenn ich einen javascript:alert von mache arrow Variable erhalte ich die HTML-Entität als Pfeil dargestellt.Wie kann ich jQuery anweisen, das zu interpretieren? arrow Variable als String und nicht als HTML.

Answer 1

Wenn der HTML-Code analysiert wird, sieht JQuery im DOM ein UPWARDS DOUBLE ARROW ("⇑"), nicht die Entitätsreferenz.Daher sollten Sie in Ihrem Javascript-Code testen "⇑" oder "\u21d1".Außerdem müssen Sie ändern, zu was Sie wechseln:

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

Answer 2

Wenn Sie eine Warnung von machen arrow Was gibt es zurück?Gibt es genau die Zeichenfolge zurück, mit der Sie vergleichen?Wenn Sie die tatsächlichen Charaktere erhalten '⇓' Und '⇑' Möglicherweise müssen Sie es vergleichen "\u21D1" Und "\u21D3".

Vielleicht möchten Sie es auch versuchen ⇑ Und ⇓ da nicht alle Browser diese Entitäten unterstützen.

Aktualisieren:Hier ist ein voll funktionsfähiges Beispiel: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 3

Verwenden Sie eine Klasse, um den aktuellen Status des Bereichs zu signalisieren.Der HTML-Code könnte so aussehen

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

Dann tun Sie es im Javascript

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

Das ist vielleicht nicht der beste Weg, aber es sollte funktionieren.Habe es nicht hart getestet

Answer 4

Besuche die .Umschalten() Wirkung.

Hier ist etwas Ähnliches, mit dem ich vorhin gespielt habe.

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>

SKRIPT:

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

Möglicherweise erhalten Sie keine exakte Übereinstimmung, weil der Browser die Entität in Kleinbuchstaben schreibt oder so.Versuchen Sie, nur zum Testen ein Karat (^) und ein kleines „v“ zu verwenden.

Bearbeitet – Meine erste Theorie war schlichtweg falsch.