javascript - jQuery 文本在第一次点击时不切换

Question

每当单击父 anchor 标记时，我都会尝试切换跨度的文本。这是 HTML:

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

虽然这是每次点击 anchor 标记时调用的 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 方法，因为页面中有多个这样的 block ，对于每个点击事件，只有特定的范围应该改变。

.collapsed 类在用户点击 anchor 标记时动态切换。

问题是当用户第一次点击 anchor 标签时，文本没有切换。下次点击它。

我真的不确定我在这里错过了什么。如果有人有线索，请指出。

Answer 1

如果您不想添加/删除类，请使用 .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>

https://jsfiddle.net/7vx1ueo1/2/