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

Question

我试图在单击按钮时在 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>

Answer 1

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

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>

Answer 2

(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>

Answer 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);
        });

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

How to show comma separated values of button on clicking it multiple times

javascript

html

jquery

css

jquery-ui