jQuery text not toggling при первом щелчке

Question

Я пытаюсь переключить текст span каждый раз, когда щелкнет его основной тег привязки. Вот HTML:

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

в то время как это Java-функции changeText, которая вызывается на каждом щелчке тега привязки

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

Если вы не хотите добавлять/удалять работу класса с помощью .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>