jQuery文本无法在第一次点击时切换

Question

我试图在点击父节点标记时切换节点的文本。下面是HTML：

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

，而这是被称为锚标记上的每一次点击

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方法changeText功能的JavaScript的，因为有多个这样的块中的每个点击事件，只有特定的跨度应该改变。

.collapsed类在用户点击锚标签时动态切换。

问题出在第一次用户点击锚标签时，文本未被切换。在下一次点击它确实。

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

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/

Answer 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>