Question

我在一个部分中有许多按钮，每个按钮的id为#balls-left-n，其中n的范围是1到15.

当点击其中一个按钮时，我想从被点击的ID中获取数字，并隐藏所有带有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>

Answer 1

希望这有帮助。

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

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

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

这是你可以玩的Fiddle。

Answer 2

＆＃13;

$(document).on('click', '.balls-left', function() {
  var num = getNum(this);
  $('.balls-left').each(function() {
    var that = $(this); 
    var bnum = getNum(that);
    if (bnum > num) {
      that.show();
    } else {
      that.hide();
    }
  });
});

var getNum = function(elem) {
  if (elem) {  
    return $(elem).attr('id').replace('balls-left-', '');
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="balls-left-1" class="balls-left">Ball 1</div>
<div id="balls-left-2" class="balls-left">Ball 2</div>
<div id="balls-left-3" class="balls-left">Ball 3</div>
<div id="balls-left-4" class="balls-left">Ball 4</div>
<div id="balls-left-5" class="balls-left">Ball 5</div>

＆＃13;

Answer 3

如果隐藏的元素共享同一个父级，则可能甚至不需要所有这些。只需在点击.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>

Answer 4

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

这是一个无效的CSS选择器，只有获取 hide方法，而不调用它。你想要这样的东西：

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

Answer 5

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

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

然后你可以按如下方式编写javascript：

$('.left-ball').click(function () {
    var BallNum = $(this).attr('num');

    $('.left-ball').each(function () {
        if ($(this).attr('num') > BallNum) {
            $(this).hide();
        }
    });
});

Answer 6

您可以像这样使用RegEx匹配。这可能会解决您未定义的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
    ...
});

Answer 7

使用原始HTML执行此操作的另一种方法：

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

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

Answer 8

我就是这样做的：

 $('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名称的子字符串？

8 个答案: