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>