隐藏使总和超过数字的按钮

Question

我有 10 个按钮，如果它们的总和超过 10，我想让一些按钮消失。例如，单击按钮 5 将使按钮 6-10 消失，单击 3 将使按钮 8-10 消失......等等。

作为一个起点，我认为我可以使用...

$(".button")[4].hide();

...因为 $(".button")[4] 显示我的第 4 个按钮的 html 并且 $(".button").hide() 在单击一个按钮时显示所有按钮。

但这会产生“隐藏不是函数”错误。

index.html

<div class="score-inputs">
<form class="buttons">
  <input class="button" type="button" value="1"></input>
  <input class="button" type="button" value="2"></input>
  <input class="button" type="button" value="3"></input>
  <input class="button" type="button" value="4"></input>
  <input class="button" type="button" value="5"></input>
  <input class="button" type="button" value="6"></input>
  <input class="button" type="button" value="7"></input>
  <input class="button" type="button" value="8"></input>
  <input class="button" type="button" value="9"></input>
  <input class="button" type="button" value="10"></input>
</form>

<script>$(document).ready(() => {
  $(".button").click(function() {
    $(".button")[4].hide();
  });
});
</script>

或者有没有更好的方法来获得我想要的结果？

Answer 1

使用数组语法得到 dom 元素而不是 jquery 元素

使用任一

$(".button").eq(4).hide();

或

$(".button")[4].style.display = "none";

Answer 2

在 jQuery 对象上使用方括号表示法返回对象内该索引处的 DOM 元素。虽然这可能对您有用，但它会使逻辑非常冗长。

实现这一点的最简单方法是保持点击值的总和，然后禁用所有将总和超过允许的最大值的按钮，如下所示：

$(document).ready(() => {
  var max = 10;

  $(".button").click(function() { 
    var total = $('.score-inputs').data('total') || 0;
    total += parseInt(this.value, 10);
    
    $('.button').prop('disabled', true).filter(function() {
      return parseInt(this.value, 10) + total <= max;
    }).prop('disabled', false);
    
    $('.score-inputs').data('total', total);
    console.log(this.value, total);
  });
});

.button[disabled] {
  background-color: #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="score-inputs">
  <form class="buttons">
    <input class="button" type="button" value="1" />
    <input class="button" type="button" value="2" />
    <input class="button" type="button" value="3" />
    <input class="button" type="button" value="4" />
    <input class="button" type="button" value="5" />
    <input class="button" type="button" value="6" />
    <input class="button" type="button" value="7" />
    <input class="button" type="button" value="8" />
    <input class="button" type="button" value="9" />
    <input class="button" type="button" value="10" />
  </form>
</div>