Javascript 如何获取ID名称的子字符串？

我在一个部分中有许多按钮，每个按钮的id形式为

#balls-left-n

，其中n的范围为1到15

单击其中一个按钮时，我希望从单击的id中获取数字，并隐藏所有具有id的按钮，这些id的名称包括大于单击的按钮的数字

因此，如果单击了

#balls-left-13

，我想隐藏

#balls-left-14

和

#balls-left-15

。但是，如果单击了

#balls-left-3

，我想隐藏通过

#balls-left-15

的

#balls-left-4

的所有按钮

我是web开发的新手，所以如果我犯了其他错误或采取了糟糕的方法，请毫不犹豫地指出这一点

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

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

$(document).ready(function() {
    $(".x-balls-left").click(function(e) {
        e.preventDefault();
        var exploded = this.id.split("-");
        alert(exploded.pop());
    });
});

 $('button[id^=balls-left-]').click(function(){
     var num_balls = $(this).attr('id').match(/[\d]/);
     $('#balls-left button:gt(' + num_balls + ')').hide();
 });

这不起作用，我得到一个错误，

num_balls

是

未定义的

，我不明白。

#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>

桌子上还剩下多少个球？
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15

希望这有帮助

var exploded = id.split("-");
alert(exploded.pop());

现在，要在HTML结构中使用该概念，可以执行以下操作：

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

$(document).ready(function() {
    $(".x-balls-left").click(function(e) {
        e.preventDefault();
        var exploded = this.id.split("-");
        alert(exploded.pop());
    });
});

 $('button[id^=balls-left-]').click(function(){
     var num_balls = $(this).attr('id').match(/[\d]/);
     $('#balls-left button:gt(' + num_balls + ')').hide();
 });

这里有一个你可以玩的小游戏。

希望这有帮助

var exploded = id.split("-");
alert(exploded.pop());

$("#balls-left button:gt(num_balls-2)").hide;

现在，要在HTML结构中使用该概念，可以执行以下操作：

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

$(document).ready(function() {
    $(".x-balls-left").click(function(e) {
        e.preventDefault();
        var exploded = this.id.split("-");
        alert(exploded.pop());
    });
});

 $('button[id^=balls-left-]').click(function(){
     var num_balls = $(this).attr('id').match(/[\d]/);
     $('#balls-left button:gt(' + num_balls + ')').hide();
 });

这是一个你可以玩的游戏

$("#balls-left button:gt(num_balls-2)").hide;

这是一个无效的CSS选择器，只获取

hide

方法，而不调用它。你想要的是：

$("#balls-left button:gt("+(num_balls-2)+")").hide();

这是一个无效的CSS选择器，只获取

hide

方法，而不调用它。你想要的是：

$("#balls-left button:gt("+(num_balls-2)+")").hide();

$（文档）.on（'click'，'s.balls left'，function（）{
var num=getNum（这个）；
$（'.balls left'）。每个（函数（）{
var，该值=$（此值）；
var bnum=getNum（该值）；
如果（bnum>num）{
show（）；
}否则{
那。隐藏（）；
}
});
});
var getNum=函数（elem）{
if（elem）{
返回$（elem）.attr（'id'）。替换（'balls-left-'，''）；
}
}

球1
球2
球3
球4
球5

$（文档）.on（'click'，'s.balls left'，function（）{
var num=getNum（这个）；
$（'.balls left'）。每个（函数（）{
var，该值=$（此值）；
var bnum=getNum（该值）；
如果（bnum>num）{
show（）；
}否则{
那。隐藏（）；
}
});
});
var getNum=函数（elem）{
if（elem）{
返回$（elem）.attr（'id'）。替换（'balls-left-'，''）；
}
}

球1
球2
球3
球4
Ball 5

首先，你应该在每个对象上放置一个类，这样你就可以一次引用所有对象，最简单的理解方法就是将Ball编号作为自定义属性放在标记中，如果可以的话：

<input type="button" id="balls-left-1" class="left-ball" num="1"/>
<input type="button" id="balls-left-2" class="left-ball" num="2"/>
etc...

---

首先，您应该在每个对象上放置一个类，以便可以同时引用所有对象，最简单的理解方法是将球号作为自定义属性放置在标记中，如果可以：

<input type="button" id="balls-left-1" class="left-ball" num="1"/>
<input type="button" id="balls-left-2" class="left-ball" num="2"/>
etc...

---

您可以像这样使用正则表达式匹配。这可能会解决未定义的num_balls错误消息

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

---

您可以像这样使用正则表达式匹配。这可能会解决未定义的num_balls错误消息

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

---

如果要隐藏的元素共享同一父元素，您甚至可能不需要所有这些。只需单击设置类。选择并使用CSS隐藏其余部分

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

$（'.x-balls-left'）。单击（函数（）{
$（this.toggleClass（'selected'）；
})

.selected.x-balls-left~.x-balls-left{
显示：无；
}

桌子上还剩下多少个球？
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15

如果要隐藏的元素共享同一父元素，您甚至不需要所有这些。只需单击设置类。选择并使用CSS隐藏其余部分

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

$（'.x-balls-left'）。单击（函数（）{
$（this.toggleClass（'selected'）；
})

.selected.x-balls-left~.x-balls-left{
显示：无；
}

桌子上还剩下多少个球？
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15

使用原始HTML的另一种方法：

$('.x-balls-left').click(function () {
    var BallNum = $(this)[0].innerHTML;

    $('.x-balls-left').each(function () {
        if ($(this)[0].innerHTML > BallNum) {
            $(this).hide();
        }
    });
});

---

使用原始HTML的另一种方法：

$('.x-balls-left').click(function () {
    var BallNum = $(this)[0].innerHTML;

    $('.x-balls-left').each(function () {
        if ($(this)[0].innerHTML > BallNum) {
            $(this).hide();
        }
    });
});

---

我就是这样做的：

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

$(document).ready(function() {
    $(".x-balls-left").click(function(e) {
        e.preventDefault();
        var exploded = this.id.split("-");
        alert(exploded.pop());
    });
});

 $('button[id^=balls-left-]').click(function(){
     var num_balls = $(this).attr('id').match(/[\d]/);
     $('#balls-left button:gt(' + num_balls + ')').hide();
 });

---

请记住，

：gt

按索引选择，这意味着

$（“#balls-left button:gt（2）”

不会选择id为

balls-left-2

的按钮，而是选择id为

balls-left-4

的按钮（根据您发布的html）

我就是这样做的：

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

$(document).ready(function() {
    $(".x-balls-left").click(function(e) {
        e.preventDefault();
        var exploded = this.id.split("-");
        alert(exploded.pop());
    });
});

 $('button[id^=balls-left-]').click(function(){
     var num_balls = $(this).attr('id').match(/[\d]/);
     $('#balls-left button:gt(' + num_balls + ')').hide();
 });

---

请记住，

：gt

按索引选择，这意味着

$（“#balls-left button:gt（2）”

不会选择id为

balls-left-2

的按钮，而是选择id为

balls-left-4

的按钮（根据您发布的html）

我不知道如何将事物标记为代码。我该怎么做？听起来像是在ID中存储数据。这对于管理数据来说是一个糟糕的选择，通常使用

[data-*]

属性和

.data（）

方法会更好。与其在

ID

中编码有用的数据，不如使用

数据球=“14”

？你能不能也发布你的html。那么，你是说我所有的按钮都有一个共同的类，然后用数据-*来区分它们？我可以用一个处理程序从一个按钮到另一个按钮的这种方式吗？我不知道如何去做