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

所有这些，我会重新审视您的应用程序的整体逻辑。这似乎不是我最简单的启用此功能的方法，虽然我不知道你到底想要做什么。

Answer 2

我不知道这是不是你想要的：

   $('h3.panel-title a').click(function(){
      if($(this).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>');
   }
   });

https://jsfiddle.net/gec5djan/1/

Answer 3

我来不及了。再次.. 这个答案使用短路解决方案。

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

JS Fiddle

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

3 个答案: