jQuery文本不会在第一次点击时切换
我试图切换跨度的文本，只要它的父锚标记被点击。 这是HTML：
<h2 class="panel-title">
<a href="#collapse1">
<span class="ui-hidden-accessible">expand</span>
</a>
</h2>
而这是每次点击锚标签时调用的changeText函数的JavaScript
function changeText() {
var taskDivClass = $('.panel-title a');
$(taskDivClass).each(
function() {
var $this = $(this);
if($this.hasClass('collapsed')) {
var taskDivSpanText = $this.find('.ui-hidden-accessible');
taskDivSpanText.html('expand');
}
else {
var taskDivSpanText = $this.find('.ui-hidden-accessible');
taskDivSpanText.html('collapse');
}
}
);
}
我使用each方法，因为页面中有多个这样的块，并且对于每个点击事件，只有特定的跨度应该改变。
当用户点击它时， .collapsed类会在锚点标签上动态切换。
问题出在第一次用户点击锚标签时，文本未被切换。 在下一次点击它确实。
我真的不确定我在这里错过了什么。 如果有人有线索，请指出。
如果您不想使用.html（）添加/删除类作品。
希望对你有帮助..
$(document).ready(function(){
$("a").click(function(){
var spanClick= $(this).find('.ui-hidden-accessible');
if (spanClick.html()==="Expand"){
spanClick.html("Collapse");
}
else{
spanClick.html("Expand");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="panel-title">
<a href="#collapse1" >
<span class="ui-hidden-accessible">Expand</span>
</a>
</h2>您不需要循环 - 原始选择器已适用于所有匹配元素
$(function() {
$('.panel-title a').on('click', function() {
var $this = $(this);
if ($this.hasClass('collapse')) {
var taskDivSpanText = $this.find('.ui-hidden-accessible');
$this.removeClass('collapse');
taskDivSpanText.html('expand');
} else {
var taskDivSpanText = $this.find('.ui-hidden-accessible');
taskDivSpanText.html('collapse');
$this.addClass('collapse');
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="panel-title">
<a href="#collapse1" class="collapse">
<span class="ui-hidden-accessible">collapse</span>
</a>
</h2>
<h2 class="panel-title">
<a href="#collapse2">
<span class="ui-hidden-accessible">expand</span>
</a>
</h2>
<h2 class="panel-title">
<a href="#collapse3">
<span class="ui-hidden-accessible">expand</span>
</a>
</h2>