保存多次点击的值并内嵌所有值

Question

我的页面上有多个按钮。我想获取这些值并在一行中显示。我该怎么做。

我有3个按钮，单击它们会返回以下值：

• 暗：returns 'scoop'
• 危险：returns 'swoosh'
• 警告：returns 'spoon'

我有一个大按钮（信息），单击后我希望该按钮返回：scoop&swoosh&spoon

我该怎么做？

let val;

  $('#one').on('click', function(){
    val = 'scoop';
  });

  $('#two').on('click', function(){
    val = 'swoosh';
  });

  $('#three').on('click', function(){
    val = 'spoon';
  });

  $('#main').on('click', function(){
   console.log(val);
   //Expected value: scoop&swoosh&spoon
 });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div><button id="one" type="button" class="btn btn-dark m-3">Dark</button></div>
<div><button id="two" type="button" class="btn btn-danger m-3">Danger</button></div>
<div><button id="three" type="button" class="btn btn-warning m-3">Warning</button></div>

<hr />
<div><button id="main" type="button" class="btn btn-info btn-block">Info</button></div>

Answer 1

[当前，每次单击都会重置变量，并分配一个新值。考虑使用数组，并为每次单击使用新项更新它。

示例：

let val = [];

$('#one').on('click', function() {
  val.push('scoop');
});

$('#two').on('click', function() {
  val.push('swoosh');
});

$('#three').on('click', function() {
  val.push('spoon');
});

$('#main').on('click', function() {
  console.log(val.join(" & "));
  //Expected value: scoop&swoosh&spoon
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div><button id="one" type="button" class="btn btn-dark m-3">Dark</button></div>
<div><button id="two" type="button" class="btn btn-danger m-3">Danger</button></div>
<div><button id="three" type="button" class="btn btn-warning m-3">Warning</button></div>

<hr />
<div><button id="main" type="button" class="btn btn-info btn-block">Info</button></div>