如何在jQuery中切换图标类时同步修改<span>标签的文本内容？

嘿，这个需求很好实现，咱们只需要在你现有的点击事件处理函数里，添加几行代码来切换<span>的文本内容就行啦！

方法一：根据当前文本切换 #

这种方式直接检查<span>里的现有文本，来决定切换后的内容：

$('.csk-landing-button-1').click(function(){
  // 先执行你原本的图标切换逻辑
  $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
  
  // 获取按钮里的span元素
  const $textSpan = $(this).find('span');
  
  // 判断当前文本，切换对应内容
  if ($textSpan.text() === 'Device Requirement') {
    $textSpan.text('Hide Requirements');
  } else {
    $textSpan.text('Device Requirement');
  }
});

方法二：根据图标类切换（更可靠） #

如果担心文本内容可能后续有变动，也可以通过图标的当前类来判断状态，这样逻辑更稳定：

$('.csk-landing-button-1').click(function(){
  const $button = $(this);
  const $icon = $button.find('i');
  const $textSpan = $button.find('span');
  
  // 切换图标类
  $icon.toggleClass('fa-plus-circle fa-minus-circle');
  
  // 根据图标当前的类判断要显示的文本
  if ($icon.hasClass('fa-plus-circle')) {
    $textSpan.text('Device Requirement');
  } else {
    $textSpan.text('Hide Requirements');
  }
});

这两种方法都能实现点击按钮时，图标和文本同步切换的效果，你可以根据自己的实际需求选择其中一种~

内容的提问来源于stack exchange，提问作者Manoj A