时间戳

首页 > 解决方案 > 保存多次点击的值并内联获取所有值

javascript - 保存多次点击的值并内联获取所有值

问题描述

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

我有 3 个按钮，onclick 他们返回这些值：

我有一个大按钮（信息），点击我希望它返回：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>

标签： javascriptjquerybuttonecmascript-6onclick

解决方案

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

例子：

let val = [];

$('button').on('click', function() {
  switch ($(this).attr("id")) {
    case "one":
      val.push('scoop');
      break;
    case "two":
      val.push('scoop');
      break;
    case "three":
      val.push('scoop');
      break;
  }
});

$('#main').on('click', function() {
  console.log(val.join(" & "));
  // Example Value: scoop & swoosh & spoon
  // Clear the array
  val = [];
});
<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>

推荐阅读