如何在多次单击时显示按钮的逗号分隔值

Posted 2023-05-08

【中文标题】如何在多次单击时显示按钮的逗号分隔值

【英文标题】：How to show comma separated values of button on clicking it multiple times

【发布时间】：2021-10-25 04:20:25

【问题描述】：

单击按钮时，我试图在 div 中输出按钮的值。一次单击它时，值会正确输出，但我想要做的是输出值，就像以逗号分隔格式单击按钮一样多次。 比如——

<button class="click" value="car">Button</button>
<div class="demo"></div>

如果我点击这个按钮 3 次，那么输出应该是 car,car,car。 我正在尝试这样做，但它不起作用。

<script>
$(".click").click(function() 
$(this).addClass("selected");
var data=$(".click").map(function ()   
return this.value;
).get().join(",");
$(".demo").text(data);
);
</script>

【参考方案1】：

(function($)
    jQuery.fn.isEmpty = function() 
       return !$.trim(this.html()).length;
    ;
(jQuery));

$(".click").click(function() 
  $(this).addClass("selected");
  const limit = 3, sep = ',', $demos = $(".demo");
  if($demos.html().split(sep).length < limit)
    $demos.append(($demos.isEmpty() ? '' : sep) + $(this).val());
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click" value="car">Button</button>
<div class="demo"></div>

【讨论】：

成功了。如果我想在点击 3 次后停止输出值怎么办？有可能吗？

我调整了我的代码，应该是你想要的

【参考方案2】：

您可以在用户每次单击按钮时将,car 附加到textContent。您还需要将这是否是第一次单击存储在布尔值中，如果是，则剪掉第一个字符。

var isFirst = true;
$(".click").click(function() 
  $(this).addClass("selected");
  $('.demo').text(($('.demo').text() + ',car').substring(isFirst ? 1 : 0))
  isFirst = false
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="click" value="car">Button</button>
<div class="demo"></div>

【参考方案3】：

如果您每次都需要逗号分隔值，那么试试这个

        var result = '';
        $(".click").click(function () 
            $(this).addClass("selected");
            var data = $(".click").map(function () 
                return this.value;
            ).get();       

            if ($(".demo").text() == "") 
                result = data;
             else 
                result = result + ',' + data;
            
            $(".demo").text(result);
        );