Question

您好我如何制作一个可以增加和减少数值的按钮？我点击一次时添加1的按钮，再次点击时将值减1，这样就不会超过1。

我有大约50个按钮，目前，当我选择2个以上的按钮时它会重置，但它必须添加所点击过的按钮的所有值。它周围的网站看起来类似于：

var clicks = 0;

function clickME() {
  clicks += 1;
  if (clicks == 2) {
    clicks = 0;
  }
  document.getElementById("clicks").innerHTML = clicks;
}

<input type="Button" id="bt" />

Answer 1

考虑每个按钮（或更普遍的每个元素）是DOM（文档对象模型）的一部分，每个按钮都是一个对象，因此没有人让你无法使用它们：你可以设置字段clicks对于每个按钮DOM对象：

function clickME(event) {
    var btn = event.target;
    btn.clicks = ((btn.clicks || 0) + 1) % 2;
    window.clicks = (window.clicks || 0) + btn.clicks * 2 - 1;
    document.getElementById("clicks").innerText = window.clicks;
}

检查您的代码，我还简化了您的逻辑，将if替换为使用MOD（%）运算符检查零。此外，我将innerHTML替换为innerText，因为我们不会将这些数字呈现为HTML代码，而是作为纯文本呈现，尽管在这种情况下，它并没有区别。

注意：不要忘记使用HTML中的onclick属性传递事件数据对象：

<input onclick="clickME(event)" ...>

看看这个小提琴： https://jsfiddle.net/57js0ps7/2/

Answer 2

您需要单独为每个按钮维护一个计数器 - 使用数组来跟踪按钮被点击的次数。如果不这样做，当您选择2个按钮并重置时，代码中的单击var将为2。

Answer 3

在你的HTML上：

假设你有50个

<button type="button" data-clicked="false">1</button>
<button type="button" data-clicked="false">2</button>

和你的javascript

var buttons = document.querySelectorAll('button');
buttons.forEach(function(button) {
  button.addEventListener('click', function() {
    if (this.dataset.clicked == 'false') {
      this.dataset.clicked = 'true';
      this.innerHTML = parseInt(this.innerHTML) + 1;
    }
    else {
      this.dataset.clicked = 'false'
      this.innerHTML = parseInt(this.innerHTML) - 1;
    }
  })
});

编辑：这是一个有效的fiddle

Answer 4

因为你有这个标记为jQuery这里是一个使用jQuery的解决方案。解决方案涉及使用data-属性来保存每个按钮（输入）的点击次数。不知道为什么你使用输入而不是按钮，但我保持相同的

它还有一个getTotal（）函数，它遍历每个元素并按下点击以查看选择了多少个插槽并为您显示该数字。

$(document).ready(function() {
  $(".btn").on("click", clickME);
});

function clickME() {
  var clicks = $(this).data("clicks");
  var newClicks = parseInt(clicks) + 1;
  if(newClicks > 1){
    newClicks = 0;
  }
  // set the new click count on the element
  $(this).data("clicks", newClicks);
  setTotal();
}


function setTotal(){
  var total = 0;
  $(".btn").each(function(imdex, btn) {
    var currClicks = parseInt($(btn).data("clicks"));
    total += currClicks;
  });
  $("#clicks").text(total);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="Button" class="btn" data-clicks=0 value="0" />
<input type="Button" class="btn" data-clicks=0 value="1" />
<input type="Button" class="btn" data-clicks=0 value="2" />
<input type="Button" class="btn" data-clicks=0 value="3" />
<input type="Button" class="btn" data-clicks=0 value="4" />
<input type="Button" class="btn" data-clicks=0 value="5" />
<input type="Button" class="btn" data-clicks=0 value="6" />

<div>
  <p>You've choose <a id="clicks">0</a> slot/s.</p>
</div>

增加和减少按钮

4 个答案: