隐藏使数字求和的按钮

Question

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

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

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

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

但这会产生 "hide is not a function" 错误。

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 对象上使用方括号表示法 returns 对象中该索引处的 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>

隐藏使数字求和的按钮

Hide buttons that make sum over number

html

javascript

jquery

button

show-hide