Como comparar uma entidade HTML com jQuery
-
09-06-2019 - |
Pergunta
Eu tenho o seguinte código html:
<h3 id="headerid"><span onclick="expandCollapse('headerid')">⇑</span>Header title</h3>
Gostaria de alternar entre seta para cima e seta para baixo cada vez que o usuário clica na 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("⇓");
}
}
Minha função segue sempre o caminho else.Se eu fizer um javacript:alert of arrow
variável estou recebendo a entidade html representada como uma seta.Como posso dizer ao jQuery para interpretar o arrow
variável como uma string e não como html.
Solução
Quando o HTML é analisado, o que o JQuery vê no DOM é um UPWARDS DOUBLE ARROW
("⇑"), não a referência da entidade.Assim, em seu código Javascript você deve testar "⇑"
ou "\u21d1"
.Além disso, você precisa alterar o que está mudando:
function expandCollapse(id) {
var arrow = $("#"+id+" span").html();
if(arrow == "\u21d1") {
$("#"+id+" span").html("\u21d3");
} else {
$("#"+id+" span").html("\u21d1");
}
}
Outras dicas
Se você fizer um alerta de arrow
o que isso retorna?Ele retorna a string exata com a qual você está combinando?Se você estiver obtendo os personagens reais '⇓'
e '⇑'
você pode ter que compará-lo "\u21D1"
e "\u21D3"
.
Além disso, você pode tentar ⇑
e ⇓
já que nem todos os navegadores suportam essas entidades.
Atualizar:aqui está um exemplo totalmente 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) ? "⇑" : "⇓" );
};
Use uma classe para sinalizar o estado atual do intervalo.O html poderia ficar assim
<h3 id="headerId"><span class="upArrow">⇑</span>Header title</h3>
Então no javascript você faz
$( '.upArrow, .downArrow' ).click( function( span ) {
if ( span.hasClass( 'upArrow' ) )
span.text( "⇓" );
else
span.text( "⇑" );
span.toggleClass( 'upArrow' );
span.toggleClass( 'downArrow' );
} );
Esta pode não ser a melhor maneira, mas deve funcionar.Não testei difícil
Confira a .alternar() efeito.
Aqui está algo semelhante com o qual eu estava brincando anteriormente.
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>
ROTEIRO:
$("#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();
});
Talvez você não esteja obtendo uma correspondência exata porque o navegador está colocando a entidade em letras minúsculas ou algo assim.Tente usar um quilate (^) e um "v" minúsculo apenas para teste.
Editado - Minha primeira teoria estava completamente errada.