jquery - 如何通过单击两个不同的链接来更改一个链接上的文本？

Question

所以我有这个演示:https://jsfiddle.net/gec5djan/但我不知道如何一键更改两个文本值。有什么建议吗？

   $('h3.panel-title a').click(function(){
      if($(this).hasClass('collapsed')) {
          $(this).html('CLOSE <span class="arrow_right2"></span>');
    }
     else{
         $(this).html('SHOW ALL BOATS <span class="green-arrow-up"></span>');
    }
  });

Answer 1

您可以使用涵盖这两个项目的选择器，而不是在点击函数内调用 $(this).html() ，例如 $('h3.panel-title a') :

HTML:

<h3 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#nested1" href="#nested-collapseOne">
            SHOW ALL BOATS <span class="arrow_right2"></span>
    </a>
</h3>

<h3 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#nested1" href="#nested-collapseOne">
            SHOW ALL BOATS <span class="arrow_right2"></span>
    </a>
</h3>

JavaScript:

   $('h3.panel-title a').click(function(){
      if($('h3.panel-title a').hasClass('collapsed')) {
          $('h3.panel-title a').html('CLOSE <span class="arrow_right2"></span>');
    }
     else{
         $('h3.panel-title a').html('SHOW ALL BOATS <span class="green-arrow-up"></span>');
    }
  });

话虽如此，我将重新审视您的应用程序的整体逻辑。在我看来，这并不是启用此功能的最干净的方法，尽管我不知道您最终想要做什么。