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

Question

I'm trying to toggle text of a span whenever it's parent anchor tag is clicked. Here is the HTML:

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

while this is the javascript of the changeText function which is called on each click of the anchor tag

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');
        }
    }
);
}

I'm using the each method because there are multiple such blocks in the page, and for each click event only that particular span should change.

The .collapsed class dynamically toggles on the anchor tag when user clicks on it.

The issue is when the first time user clicks on the anchor tag, the text is not toggled. On next click it does.

I'm really not sure what I'm missing here. If someone has a clue, please point it out.

Answer 1

You do not need to loop - the original selector already applies to all the matching elements

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

You could also encapsulate the function into a named function like in your code

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

If you dont want to add/remove class work with .html().

Hope this will help you..

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