j查询文本在第一次点击时不切换

jQuery text not toggling on first click

本文关键字：查询 文本 第一次      更新时间：2023-09-26

每当单击父锚点标签时，我都会尝试切换跨度的文本。这是 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>

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

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

$(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>

您还可以像在代码中一样将函数封装到命名函数中 

$(function() {
  // define function
  var changeText = 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');
    }
  };
  // bind function to click event 
  $('.panel-title a').on('click', changeText );
});
<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>

相关文章：