Question

在click事件上，我想更改文本并同时切换2个不同的类。我已经在下面设置了我的代码，但是它只执行一个而不执行另一个

$(document).ready(function() {

  $('.more-benefits-btn').click(function() {


    $(this).text($(this).text() == 'Show Less' ? 'Show More Benefits' : 'Show Less');
    $("i", this).toggleClass('fal fa-chevron-down fal fa-chevron-up');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span class="more-benefits-btn">Show More Benefits&nbsp;<i class="fal fa-chevron-down"></i></span>

Answer 1

可能是因为它更改了按钮的全部内容

$(document).ready(function () {

$('.more-benefits-btn').click(function () {
  var $this = $(this).find('span'); 
    $this.text($this.text() == 'Show Less' ? 'Show More Benefits' : 'Show Less');
    $(this).find('i').toggleClass('rotate');
});
});

i{
display: inline-block;
transition:all ease .5s;
}
i.rotate{
transform:rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="more-benefits-btn"> <span> Show More Benefits </span><i>V</i></button>

Answer 2

<i>类未切换的原因是，当您使用文本方法时，<i>元素已被删除。

使用此代码

  $('.more-benefits-btn').click(function() {
  var i = $("i", this);
  $(this).text($(this).text() == 'Show Less' ? 'Show More Benefits' : 'Show Less');
  i.toggleClass('fa-chevron-down fa-chevron-up');
  $(this).append(i);
  });

jQuery同时更改文本和toggleClass

2 个答案: