javascript - 如何获得ID名称的子字符串？

我在一个部分中有许多按钮，每个按钮的ID格式为#balls-left-n，其中n的范围为1到15。

当单击这些按钮之一时，我想从单击的ID中获取数字，并隐藏所有ID名称都包含大于单击的数字的按钮。

因此，如果单击#balls-left-13，我想隐藏#balls-left-14和#balls-left-15。但是，如果单击#balls-left-3，我想隐藏从#balls-left-4到#balls-left-15的所有按钮。

我是web-dev的新手，所以如果我犯了其他错误或采取了错误的方法，请毫不犹豫地指出。

我为每个按钮都有一个处理程序（如果我知道更多，可能是一个函数），如下所示：

$("#balls-left-14").click(function() {
    var num_balls = $(this).attr('id').match(/[\d]/);
    j_end_balls_on_table = 14;
    $("#balls-left button:gt(num_balls-2)").hide;
    ...
    other stuff
    ...
});

这没有用，并且我得到一个错误，指出num_balls是undefined，我不理解。
#balls-left是所有按钮都位于其中的部分。

根据要求提供相关HTML

<section id="balls-left">
    <h2>How Many Balls are Left on the Table?</h2>
    <button type="button" id="balls-left-2" class="x-balls-left">2</button>
    <button type="button" id="balls-left-3" class="x-balls-left">3</button>
    <button type="button" id="balls-left-4" class="x-balls-left">4</button>
    <button type="button" id="balls-left-5" class="x-balls-left">5</button>
    <button type="button" id="balls-left-6" class="x-balls-left">6</button>
    <button type="button" id="balls-left-7" class="x-balls-left">7</button>
    <button type="button" id="balls-left-8" class="x-balls-left">8</button>
    <button type="button" id="balls-left-9" class="x-balls-left">9</button>
    <button type="button" id="balls-left-10" class="x-balls-left">10</button>
    <button type="button" id="balls-left-11" class="x-balls-left">11</button>
    <button type="button" id="balls-left-12" class="x-balls-left">12</button>
    <button type="button" id="balls-left-13" class="x-balls-left">13</button>
    <button type="button" id="balls-left-14" class="x-balls-left">14</button>
    <button type="button" id="balls-left-15" class="x-balls-left">15</button>
</section>

最佳答案

如果要隐藏的元素共享同一个父元素，甚至可能不需要所有这些元素。只需单击设置class即可。selected并使用CSS .selected.x-balls-left ~ .x-balls-left {display: none;}隐藏其余部分

$('.x-balls-left').click(function() {
   $(this).toggleClass('selected');
})

.selected.x-balls-left ~ .x-balls-left {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="balls-left">
            <h2>How Many Balls are Left on the Table?</h2>
            <button type="button" id="balls-left-2" class="x-balls-left">2</button>
            <button type="button" id="balls-left-3" class="x-balls-left">3</button>
            <button type="button" id="balls-left-4" class="x-balls-left">4</button>
            <button type="button" id="balls-left-5" class="x-balls-left">5</button>
            <button type="button" id="balls-left-6" class="x-balls-left">6</button>
            <button type="button" id="balls-left-7" class="x-balls-left">7</button>
            <button type="button" id="balls-left-8" class="x-balls-left">8</button>
            <button type="button" id="balls-left-9" class="x-balls-left">9</button>
            <button type="button" id="balls-left-10" class="x-balls-left">10</button>
            <button type="button" id="balls-left-11" class="x-balls-left">11</button>
            <button type="button" id="balls-left-12" class="x-balls-left">12</button>
            <button type="button" id="balls-left-13" class="x-balls-left">13</button>
            <button type="button" id="balls-left-14" class="x-balls-left">14</button>
            <button type="button" id="balls-left-15" class="x-balls-left">15</button>
        </section>

关于javascript - 如何获得ID名称的子字符串？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36433764/