使用单击按钮时如何重置值？答案

【问题标题】：How to reset values when use click button?使用单击按钮时如何重置值？
【发布时间】：2022-01-01 16:38:18
【问题描述】：

我有这个 html 和 jQuery，它有助于获取 div 中的值，以便单击按钮并且它们工作正常。通过某种方式，我想反转功能，以便我可以取消选择并选择其他东西。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">. 
</script>
<div class="demo"></div>
<div class="clicked-order"></div>
<button id="one" class="vehicle" value="car">Car</button>
<div class="clicked-order"></div>
<button id="two" class="vehicle" value="bus">Bus</button>
<div class="clicked-order"></div>
<button id="three" class="vehicle" value="truck">Truck</button>
<div class="clicked-order"></div>
<button id="four" class="vehicle" value="copter">Copter</button>
<div class="clicked-order"></div>
<button id="five" class="vehicle" value="train">Train</button>

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

$("button.vehicle").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());
}
});

$(function() {
var click = 0;
$("button.vehicle").click(function(){
if (click <  3) {
$(this).prev().show();
var current = $(this).prev().text();
var existingClicks = current.split(" ");
if(existingClicks.length > 1) {
$(this).prev().text(current+" &"+(++click))
$(this).prev().append("<button class='reset'>X</button>");
}
else {
$(this).prev().text(" "+(++click))
$(this).prev().append("<button class='reset'>X</button>");
}
}
})
})

当我单击任何按钮时，它会输出相应的值，并显示单击按钮的顺序。我正在尝试在订单号旁边添加一个“x”按钮，以便通过单击它我可以重置 div 中的值以及该特定订单号，并可以在其位置选择其他内容。

例如：- 如果我在第一个和第三个数字上单击“汽车”，在第二个数字上单击“卡车”，那么它将输出值为 Car、Truck、Car。现在，如果我想将第二个值更改为 Bus，那么我应该能够重置单击“Truck”并在第二个数字处选择“Bus”，然后此按钮将显示 2，表示这是第二个数字选择。谢谢

【问题讨论】：

欢迎来到 Stack Overflow。您可能需要考虑使用.toggleClass() 而不是.addClass()。

标签： javascript html jquery css jquery-ui

【解决方案1】：

考虑以下替代方案。

$(function() {
  var selected = [];

  $("button.vehicle").click(function() {
    $(this).toggleClass("selected");
    if ($(this).hasClass("selected")) {
      if (selected.length < 3) {
        // Add Value to end
        selected.push($(this).val());
      } else {
        return false;
      }
    } else {
      // Remove Value
      selected.splice(selected.indexOf($(this).val()), 1);
    }
    $(".demo").html(selected.join(", "));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="clicked-order"></div>
<button id="three" class="vehicle" value="truck">Truck</button>
<div class="clicked-order"></div>
<button id="four" class="vehicle" value="copter">Copter</button>
<div class="clicked-order"></div>
<button id="five" class="vehicle" value="train">Train</button>

<div class="demo"></div>

这会为选定项目保留一个数组。使用.toggleClass()，我们可以在每次点击时添加或删除类。我们可以让他们根据点击的状态执行特定的操作。

单击将添加或删除选定的按钮。

【讨论】：