Comment comparer une entité html avec jQuery
-
09-06-2019 - |
Question
J'ai le code html suivant:
<h3 id="headerid"><span onclick="expandCollapse('headerid')">⇑</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 == "⇓") {
$("#"+id+" span").html("⇑");
} else {
$("#"+id+" span").html("⇓");
}
}
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.
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 ⇑
et ⇓
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("⇑");
} else {
$arrowSpan.html("⇓");
}
// one liner:
//$("#" + id + " span").html( ($("#" + id + " span").text().charCodeAt(0) === 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">⇑</span>Header title</h3>
Puis dans le code javascript, vous ne
$( '.upArrow, .downArrow' ).click( function( span ) {
if ( span.hasClass( 'upArrow' ) )
span.text( "⇓" );
else
span.text( "⇑" );
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.