多次点击按钮时如何将按钮值以逗号分隔的形式重复展示

现有代码问题分析 #

你当前的代码逻辑是每次触发点击事件时，遍历页面内所有.click类按钮提取value值拼接，没有统计点击次数的逻辑，因此无论点击多少次，最终div里都只会展示一次按钮值，和预期效果不符。

修正后的实现代码 #

方案1：用数组累计点击值（推荐，后续扩展更灵活） #

<script>
// 定义数组存储每次点击的按钮值
const clickRecord = [];
$(".click").click(function() {
  $(this).addClass("selected");
  // 把当前点击的按钮value追加到数组
  clickRecord.push(this.value);
  // 拼接为逗号分隔的字符串写入目标div
  $(".demo").text(clickRecord.join(","));
});
</script>

方案2：直接追加到现有内容（无需额外全局变量） #

<script>
$(".click").click(function() {
  $(this).addClass("selected");
  const currentValue = this.value;
  const $target = $(".demo");
  const originContent = $target.text();
  // 已有内容先加逗号再追加新值，没有内容直接写入
  $target.text(originContent ? `${originContent},${currentValue}` : currentValue);
});
</script>

如果页面存在多个不同value的.click类按钮，上述代码也可正常适配，每次点击对应按钮就会追加对应value到div中。

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