Comment comparer une entité html avec jQuery

StackOverflow https://stackoverflow.com/questions/30003

Question

J'ai le code html suivant: 

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

Je voudrais basculer entre le haut et flèche vers le bas à chaque fois que l'utilisateur clique sur la balise span. 

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

Ma fonction est d'aller toujours de l'autre chemin.Si je fais une javacript:alerte de arrow variable je reçois le code html de l'entité représentée comme une flèche.Comment puis-je savoir jQuery pour interpréter les arrow variable une chaîne de caractères et non pas au format html.

Était-ce utile?

La solution

Quand le HTML est analysée, ce que JQuery voit dans les DOM est un UPWARDS DOUBLE ARROW ("⇑"), et non l'entité de référence.Ainsi, dans votre code Javascript, vous devez tester "⇑" ou "\u21d1".Aussi, vous avez besoin de changer ce que vous êtes de passage à:

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

Autres conseils

Si vous faites une alerte de arrow en quoi est-il de retour?Est-il retourner la chaîne exacte que vous êtes correspondant à contre?Si vous obtenez les caractères réels '⇓' et '⇑' vous pouvez avoir pour le match contre "\u21D1" et "\u21D3".

Aussi, vous pouvez essayer de &#8657; et &#8659; depuis pas tous les navigateurs prennent en charge ces entités.

Mise à jour:voici un travail entièrement exemple:http://jsbin.com/edogop/3/edit#html,en direct

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("&#8657;");                           
  } else {            
    $arrowSpan.html("&#8659;");                           
  }

  // one liner:
  //$("#" + id + " span").html( ($("#" + id + " span").text().charCodeAt(0) === 8659) ? "&#8657;" : "&#8659;" );
};

Utiliser une classe pour signaler l'état actuel de la portée.Le code html peut ressembler à ceci

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

Puis dans le code javascript, vous ne

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

Cela peut ne pas être le meilleur moyen, mais il devrait fonctionner.Na pas de test difficile

Découvrez l' .toggle() effet.

Voici quelque chose de similaire, je jouais avec la précédente.

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>

SCRIPT:

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

Peut-être que vous n'êtes pas obtenir une correspondance exacte, car le navigateur est inférieur du corps de l'entité ou de quelque chose.Essayez d'utiliser un accent circonflexe (^) et bas-de-casse "v" juste pour le test.

Monté Ma première théorie était simplement faux.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top