Question

我正在尝试在点击父级锚标记时切换范围的文本。这是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类会动态切换锚标记。

问题是当用户第一次点击锚标记时，文本未切换。在下一次单击它。

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

Answer 1

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

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

Answer 2

如果您不想使用.html（）添加/删除类工作。

希望这会对你有帮助..

ListRowPresenter

$(document).ready(function(){
  $("a").click(function(){
    var spanClick= $(this).find('.ui-hidden-accessible');
    if (spanClick.html()==="Expand"){
     spanClick.html("Collapse");
    }
    else{
     spanClick.html("Expand");
    }
  });
});

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

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

2 个答案: