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>

这里我是toogle .fa图标。但是我想要标记<span>标记文本。那我该怎么做呢？

Answer 1

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

＆＃13;

$('.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();

＆＃13;

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

＆＃13;

Answer 2

以下是您的解决方案，使用.hasClass()

    $('.csk-landing-button-1').click(function () {
       $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
       if($(this).find('i').hasClass('fa-plus-circle'))
          $(this).find('span').html("On plus");
       else 
          $(this).find('span').html("On minus");
    });

Answer 3

您可以使用jQuery's .end() method来结束＆＃34;先前的过滤操作，在这种情况下是.find('i')操作。然后，您可以链接另一个.find()以定位span。

＆＃13;

$('.csk-landing-button-1').on('click', function() {
  const newText = 'New text';

  $(this)
    .find('i')
      .toggleClass('fa-plus-circle fa-minus-circle')
    .end()
    .find('span')
      .text(newText);
});

＆＃13;

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

＆＃13;

当然，您也可以这样做而不是链接方法并使用.end()方法：

＆＃13;

$('.csk-landing-button-1').on('click', function() {
  const $this = $(this);
  const newText = 'New text';
  
  $this.find('i').toggleClass('fa-plus-circle fa-minus-circle');
  $this.find('span').text(newText);
});

＆＃13;

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

＆＃13;

如何在Jquery中使用toogle类更改内部html内容？

3 个答案: