如何将 html 实体与 jQuery 进行比较
-
09-06-2019 - |
题
我有以下 html 代码:
<h3 id="headerid"><span onclick="expandCollapse('headerid')">⇑</span>Header title</h3>
每次用户单击跨度标签时,我想在向上箭头和向下箭头之间切换。
function expandCollapse(id) {
var arrow = $("#"+id+" span").html(); // I have tried with .text() too
if(arrow == "⇓") {
$("#"+id+" span").html("⇑");
} else {
$("#"+id+" span").html("⇓");
}
}
我的功能总是走其他路径。如果我制作一个 javacript:alert arrow
变量 我得到了表示为箭头的 html 实体。我怎样才能告诉 jQuery 来解释 arrow
变量作为字符串而不是 html。
解决方案
当解析 HTML 时,JQuery 在 DOM 中看到的是 UPWARDS DOUBLE ARROW
(“⇑”),而不是实体引用。因此,在你的 Javascript 代码中你应该测试 "⇑"
或者 "\u21d1"
. 。此外,您还需要更改要切换的内容:
function expandCollapse(id) {
var arrow = $("#"+id+" span").html();
if(arrow == "\u21d1") {
$("#"+id+" span").html("\u21d3");
} else {
$("#"+id+" span").html("\u21d1");
}
}
其他提示
如果您发出以下警报 arrow
它返回什么?它是否返回您要匹配的确切字符串?如果你得到的是实际的角色 '⇓'
和 '⇑'
你可能需要将它与 "\u21D1"
和 "\u21D3"
.
另外,您可能想尝试 ⇑
和 ⇓
因为并非所有浏览器都支持这些实体。
更新: :这是一个完整的工作示例:http://jsbin.com/edogop/3/edit#html,直播
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) ? "⇑" : "⇓" );
};
使用类来表示跨度的当前状态。html 可能看起来像这样
<h3 id="headerId"><span class="upArrow">⇑</span>Header title</h3>
然后在 javascript 中你做
$( '.upArrow, .downArrow' ).click( function( span ) {
if ( span.hasClass( 'upArrow' ) )
span.text( "⇓" );
else
span.text( "⇑" );
span.toggleClass( 'upArrow' );
span.toggleClass( 'downArrow' );
} );
这可能不是最好的方法,但应该有效。没有测试过很难
查看 .toggle() 影响。
这是我之前玩过的类似的东西。
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>
脚本:
$("#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();
});
也许您没有获得完全匹配,因为浏览器将实体小写化或其他原因。尝试使用克拉 (^) 和小写“v”仅用于测试。
编辑-我的第一个理论是完全错误的。
不隶属于 StackOverflow