Come confrontare un'entità HTML con jQuery
-
09-06-2019 - |
Domanda
Ho il seguente codice html:
<h3 id="headerid"><span onclick="expandCollapse('headerid')">⇑</span>Header title</h3>
Vorrei alternare tra la freccia su e la freccia giù ogni volta che l'utente fa clic sul tag span.
function expandCollapse(id) {
var arrow = $("#"+id+" span").html(); // I have tried with .text() too
if(arrow == "⇓") {
$("#"+id+" span").html("⇑");
} else {
$("#"+id+" span").html("⇓");
}
}
La mia funzione va sempre nell'altro percorso.Se creo un javacript:alert of arrow
variabile ottengo l'entità html rappresentata come una freccia.Come posso dire a jQuery di interpretare il file arrow
variabile come stringa e non come html.
Soluzione
Quando l'HTML viene analizzato, ciò che JQuery vede nel DOM è a UPWARDS DOUBLE ARROW
("⇑"), non il riferimento all'entità.Pertanto, nel tuo codice Javascript dovresti testare "⇑"
O "\u21d1"
.Inoltre, devi modificare ciò a cui stai passando:
function expandCollapse(id) {
var arrow = $("#"+id+" span").html();
if(arrow == "\u21d1") {
$("#"+id+" span").html("\u21d3");
} else {
$("#"+id+" span").html("\u21d1");
}
}
Altri suggerimenti
Se fai un avviso di arrow
cosa restituisce?Restituisce la stringa esatta con cui stai confrontando?Se ottieni i personaggi reali '⇓'
E '⇑'
potresti doverlo confrontare "\u21D1"
E "\u21D3"
.
Inoltre, potresti provare ⇑
E ⇓
poiché non tutti i browser supportano tali entità.
Aggiornamento:ecco un esempio completamente funzionante:http://jsbin.com/edogop/3/edit#html,dal 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) ? "⇑" : "⇓" );
};
Utilizza una classe per segnalare lo stato corrente dello span.L'HTML potrebbe assomigliare a questo
<h3 id="headerId"><span class="upArrow">⇑</span>Header title</h3>
Quindi nel Javascript lo fai
$( '.upArrow, .downArrow' ).click( function( span ) {
if ( span.hasClass( 'upArrow' ) )
span.text( "⇓" );
else
span.text( "⇑" );
span.toggleClass( 'upArrow' );
span.toggleClass( 'downArrow' );
} );
Questo potrebbe non essere il modo migliore, ma dovrebbe funzionare.Non l'ho testato duramente
Dai un'occhiata a .attiva() effetto.
Ecco qualcosa di simile con cui stavo giocando prima.
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>
SCENEGGIATURA:
$("#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();
});
Forse non ottieni una corrispondenza esatta perché il browser sta scrivendo l'entità in minuscolo o qualcosa del genere.Prova a utilizzare il carato (^) e la "v" minuscola solo per eseguire test.
Modificato: la mia prima teoria era chiaramente sbagliata.