如何獲得ID名稱的子字符串？

Question

我在一個部分中有許多按鈕，每個按鈕的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>

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());
    });
});

這是您可以玩的小提琴 。

Answer 2

 $(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-', ''); } } 

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

Answer 3

如果要隱藏的元素共享同一個父元素，甚至可能不需要所有這些元素。 只需在click .selected上設置類，然后使用CSS .selected.x-balls-left ~ .x-balls-left {display: none;}隱藏其余部分.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）。