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

Question

I have a number of buttons within a section, each with an id of the form #balls-left-n , where n ranges from 1 to 15.

When one of these buttons is clicked, I want to grab the number from the id that was clicked and hide all of the buttons with ids that have names including numbers that are greater than the one clicked on.

So, if #balls-left-13 is clicked, I want to hide #balls-left-14 and #balls-left-15 . But if #balls-left-3 is clicked I want to hide all the buttons from #balls-left-4 through #balls-left-15 .

I'm a novice at web-dev so if I've made other mistakes or taken a poor approach don't hesitate to point that out.

I have a handler for each of the buttons (which if I knew more could probably be one function) that look like this:

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

This didn't work and I get an error that num_balls is undefined , which I don't understand. #balls-left is the section all of the buttons are inside of.

relevant HTML as requested

<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

Hope this helps.

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

Now, to use that concept on your HTML structure, you can do something like this:

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

And here's a Fiddle you can play around with.

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

You might don't even need all of these if your elements to hide share the same parent. Just set class on click .selected and hide the rest using 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;

This is an invalid CSS selector, and only gets the hide method, without calling it. You want something like:

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

Answer 5

First you should put a class on each object so you can reference them all at once, and the simplest way to understand is to just put the ball number right in the tag as a custom attribute if you can:

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

Then you can write the javascript as follows:

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

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

Answer 6

You can use RegEx match like this. This might resolve your undefined num_balls error message.

$("#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

Another way of doing it using your original 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

I just did it like this:

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

Keep in mind that :gt select by index, it means that $('#balls-left button:gt(2)') will not select the button with id balls-left-2 but the one with id balls-left-4 (according to the html you posted).