Font Awesome与Bootstrap场景下循环内点击按钮切换span类名咨询

实现方案 #

首先你的现有模板代码存在重复ID的问题，id="StarIcon"在循环中会生成多个相同ID的元素，不符合HTML规范，也会影响元素选择，建议先移除重复ID，给按钮添加统一的类名用于事件绑定。

最优方案：点击对应按钮仅修改自身内部span类 #

调整后的模板代码

{% for i in X %}
    <button id="{{i.id}}" class="star-btn">
        <span class="class1"></span>
    </button>
{% endfor %}

原生JS实现

document.addEventListener('DOMContentLoaded', function() {
  const starBtns = document.querySelectorAll('.star-btn');
  starBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const targetSpan = this.querySelector('span');
      // 单次修改：把class1替换为class2
      targetSpan.classList.replace('class1', 'class2');
      // 如果需要来回切换两种状态，把上面一行替换为下面两行即可
      // targetSpan.classList.toggle('class1');
      // targetSpan.classList.toggle('class2');
    })
  })
})

jQuery实现

$(function() {
  $('.star-btn').click(function() {
    // 单次修改
    $(this).find('span').removeClass('class1').addClass('class2');
    // 切换状态可改为：$(this).find('span').toggleClass('class1 class2');
  })
})

备选方案1：修改所有按钮内的span类 #

原生JS实现

document.querySelectorAll('button span.class1').forEach(span => {
  span.classList.replace('class1', 'class2');
})

jQuery实现

$('button span.class1').removeClass('class1').addClass('class2');

备选方案2：仅修改最后一个按钮内的span类 #

原生JS实现

const allStarSpans = document.querySelectorAll('button span.class1');
if (allStarSpans.length) {
  allStarSpans[allStarSpans.length - 1].classList.replace('class1', 'class2');
}

jQuery实现

$('button span.class1:last').removeClass('class1').addClass('class2');

补充说明 #

如果你是要切换Font Awesome的空心/实心星标，直接把class1设为far fa-star（空心星）、class2设为fas fa-star（实心星）即可直接生效，无需额外配置样式。

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