javascript - 如何使用 Jquery 中的切换类更改内部 html 内容？

Question

这是我的 html 代码，如下所示，

<button  type="button" class="csk-landing-button-1">
    <i class="fa fa-plus-circle" aria-hidden="true"></i>
    <span>Device Requirement</span>
</button>

<script>
$('.csk-landing-button-1').click(function(){    
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});
</script>

这里我切换了.fa图标。但我想改变<span>标签文本也。那我能做什么呢。

Answer 1

您可以使用.is(selector)或.hasClass(className)检查元素是否具有该类并执行所需的操作。

$('.csk-landing-button-1').click(function() {
  var i = $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
  if (i.is('.fa-plus-circle')) { //i.hasClass('fa-plus-circle')
    $(this).find('span').text('Plus');
  } else {
    $(this).find('span').text('Minus');
  }
}).click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="csk-landing-button-1">
    <i class="fa fa-plus-circle" aria-hidden="true"></i>
    <span>Device Requirement</span>
</button>