Javascript jQuery文本在第一次单击时不切换

每当单击跨度的父锚点标记时，我尝试切换跨度的文本。以下是HTML：

<h2 class="panel-title">
    <a href="#collapse1">
        <span class="ui-hidden-accessible">expand</span>
    </a>
</h2>

我使用的是

each

方法，因为页面中有多个这样的块，对于每个单击事件，只有特定的跨度应该改变

当用户单击锚定标记时，

.collapsed

类会动态切换锚定标记

问题是当用户第一次单击锚定标记时，文本不会被切换。在下一步单击时，它确实会

---

我真的不知道我错过了什么。如果有人有线索，请指出。

您不需要循环-原始选择器已应用于所有匹配元素

$（函数（）{
$（'.panel title a'）。在（'click'，function（）上{
var$this=$（this）；
if（$this.hasClass（'collapse'））{
var taskDivSpanText=$this.find（'.ui hidden-accessible'）；
$this.removeClass（'collapse'）；
taskDivSpanText.html（'expand'）；
}否则{
var taskDivSpanText=$this.find（'.ui hidden-accessible'）；
taskDivSpanText.html（'collapse'）；
$this.addClass（'collapse'）；
}
});
});
您不需要循环-原始选择器已应用于所有匹配元素


$（函数（）{
$（'.panel title a'）。在（'click'，function（）上{
var$this=$（this）；
if（$this.hasClass（'collapse'））{
var taskDivSpanText=$this.find（'.ui hidden-accessible'）；
$this.removeClass（'collapse'）；
taskDivSpanText.html（'expand'）；
}否则{
var taskDivSpanText=$this.find（'.ui hidden-accessible'）；
taskDivSpanText.html（'collapse'）；
$this.addClass（'collapse'）；
}
});
});
如果不想添加/删除类，请使用.html（）进行工作

希望这对你有帮助


$（文档）.ready（函数（）{
$（“a”）。单击（函数（）{
var spanClick=$（this.find（'.ui hidden-accessible'）；
如果（spanClick.html（）=“展开”）{
html（“折叠”）；
}
否则{
spanClick.html（“展开”）；
}
});
});
如果不想添加/删除类，请使用.html（）进行工作

希望这对你有帮助


$（文档）.ready（函数（）{
$（“a”）。单击（函数（）{
var spanClick=$（this.find（'.ui hidden-accessible'）；
如果（spanClick.html（）=“展开”）{
html（“折叠”）；
}
否则{
spanClick.html（“展开”）；
}
});
});

您没有调用该函数。添加
changeText（）
afterNote jQueryUI有用于此的事件处理程序和挂钩（如果您正在使用它的话）？我使用它将函数绑定到click事件：
$（“.panel heading”）。单击（changeText）您没有调用该函数。添加
changeText（）
afterNote jQueryUI有用于此的事件处理程序和挂钩（如果您正在使用它的话）？我使用它将函数绑定到click事件：
$（“.panel heading”）。单击（changeText）我不想在这里添加/删除折叠类，所以我使用了以下代码：
$（'.panel title a'）.on（'click'，function（）{var$this=$（this）；if（$this.hasClass（'collapse'））{var taskDivSpanText=$this.find（'.ui hidden accessible'）；console.log（taskDivClass）；taskDivSpanText.html（'expand'）；}else{var taskDivSpanText=$this.find（'.ui hidden accessible'）；taskDivSpanText.html（'collapse'）；console.log（taskDivSpanText）；}；
但Console显示错误，它显示的是nullWell的值
taskDivSpanText
，
taskDivClass
未在我的代码中定义-为什么要记录/使用它？您不需要它-您正在记录
taskDivClass
但您说
taskDivSpanText
为空（它们是不同的元素）@anwartheravian如果您不想添加/删除类，那么每次都会得到相同的结果，因为没有任何元素将类
collapse
应用于它们（就您提供的HTML而言）。我不想在这里添加/删除collapse类，所以我使用了以下代码：
$（'.panel title a'）。on（'click'，function（）{var$this=$（this）；if（$this.hasClass（'collapse'））{var taskDivSpanText=$this.find（'.ui hidden accessible'）；console.log（taskDivClass）；taskDivSpanText.html（'expand'）；}else{var taskDivSpanText=$this.find（'.ui hidden accessible'）；taskDivSpanText.html（'collapse'）；console.log（taskDivSpanText）；}}}}）；
但是控制台显示错误，它显示的是nullWell的值
taskDivSpanText
，
taskDivClass
未在我的代码中定义-为什么要记录/使用它？您不需要它-您正在记录
taskDivClass
，但您说
taskDivSpanText
为空（它们是不同的元素）@anwartheravian如果您不想添加/删除类，那么每次都会得到相同的结果，因为没有任何元素对它们应用了类
collapse
（就您提供的HTML而言）
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');
        }
    }
);
}