我想创建一个更新列表，当您只看到更新的标题时 - 除非您单击标题附近的向下三 Angular 形，然后您将看到完整的更新信息 + 向下三 Angular 形将更改为向上的三 Angular 形。单击向上的三 Angular 形后，您将再次仅看到更新的标题+三 Angular 形将向下。
所以我编写了以下代码来实现它:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
arrowsUpdate();
</script>
<p>
<span class="down-arrow">▼</span>
<br>
<span class="hidden-text">update 1</span>
</p>
<p>
<span class="down-arrow">▼</span>
<br>
<span class="hidden-text">update 2</span>
</p>
</body>
</html>
JS:
function arrowsUpdate(){
$(document).ready(function(){
$(".down-arrow").each(function(){
$(this).click(function(){
$(this).siblings(".hidden-text").slideToggle(0,"linear");
if($(this).html()=="▼")
$(this).html("▲");
else
$(this).html("▼");
});
});
});
}
这段代码的问题是指向的三 Angular 形总是向下的。好像if有问题语句 - 总是返回 false。
我不明白为什么会发生这种情况，特别是当设置的代码行( $(this).html("▲"); 和 $(this).html("▼"); )按预期工作时(尝试在不同的页面中使用这些代码行，并且它有效)。
为什么会出现这种情况 $(this).html()=="▼"如果 this 的内容始终返回 false是 ▼ ？
最佳答案
你可以用实体设置html，但是当你拿回来时，它不再是实体而是字符，这就是实体的工作原理。
更清楚地说，这条线每次都会失败
if( $(this).html()=="▼" )
因为$(this).html()永远不会返回实体，而是字符▼，证明...
document.body.innerHTML = '▼';
console.log( document.body.innerHTML )在不依赖标记的情况下创建切换功能的更简单方法是仅使用标志
function arrowsUpdate() {
$(".down-arrow").on('click', function() {
$(this).siblings(".hidden-text").slideToggle(0, "linear");
var flag = $(this).data('flag');
$(this).html(flag ? "▼" : "▲").data('flag', !flag);
});
}
关于javascript - 在 jQuery 中使用带有符号的 html() 方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39647987/