如何用JQuery重复创建带有不同class属性的button标签？

嘿，这个需求其实很好解决，核心就是给每个新生成的按钮分配独一无二的class标识。我给你两种常见的实现思路，你可以根据实际需求选择：

方法一：用计数器生成递增的class #

这种方式最简单，通过一个计数器追踪生成次数，每次把计数器值拼到class里，保证每个按钮的class都不一样：

完整代码示例 #

<div class="btndiv"> 
  <button class="btn">点击生成新按钮</button> 
</div>

// 初始化计数器，第一个按钮已经是默认的.btn，所以从1开始
let btnCount = 1;

// 注意用事件委托，确保新生成的按钮也能触发点击事件
$(document).on('click', '.btn', function() {
  // 生成带唯一class的按钮，比如btn-1、btn-2、btn-3...
  $(".btndiv").append(`<button class='btn btn-${btnCount}'>按钮${btnCount}</button>`);
  btnCount++;
});

这样每次点击生成的按钮，class会是btn btn-1、btn btn-2依次递增，既保留了基础的.btn样式，又有了独一无二的标识class。

方法二：循环使用自定义class列表 #

如果你想要的是预设的不同class（比如样式类primary、secondary），而不是递增数字，可以用一个数组存所有想要的class，循环切换：

完整代码示例 #

<div class="btndiv"> 
  <button class="btn">点击生成新按钮</button> 
</div>

// 预设你想用的class列表
const customClasses = ['primary-btn', 'secondary-btn', 'success-btn', 'danger-btn'];
let currentIndex = 0;

$(document).on('click', '.btn', function() {
  // 取当前要使用的class
  const targetClass = customClasses[currentIndex];
  $(".btndiv").append(`<button class='btn ${targetClass}'>带${targetClass}的按钮</button>`);
  // 循环切换，用完最后一个回到第一个
  currentIndex = (currentIndex + 1) % customClasses.length;
});

这样生成的按钮会依次带上primary-btn、secondary-btn这些自定义class，循环往复。

关键注意点 #

一定要用事件委托（$(document).on('click', '.btn', ...)）而不是直接绑定$(".btn").click(...)，因为后者只能给页面加载时已存在的按钮绑定事件，新生成的按钮不会生效。

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