将ID名称的一部分变成变量

Question

I have a bunch of divs with matching ids (#idA_1 and #idB_1, #idA_2 and #idB_2, etc) . In jquery I wanted to assign click functions, so that when I click an #idA it will show and hide an #idB . Basically I want to make this:

$(".idA_x").click(function(){
    $("idB_x").toggleClass("hide")
});

X would be a variable to make #idA and #idB match. I could write each individually, but that would take too much code, is there a way to make the number in the id into a variable?

Answer 1

Sure, you can do:

var num = 13;
addButtonListener(num);

function addButtonListener(num){
    $("#idA_"+num).click(function(){
        $("#idB_"+num).toggleClass("hide")
    });
}

Answer 2

Try JQuery solution :

var x = 1;
$(".idA_" + x ).click(function(){
    $(".idB_" + x ).toggleClass("hide")
});

Hope this helps.

Answer 3

There are many ways to achieve that, but what you probably want is to create a shared CSS class, eg .ids , and bind the event listener to that one:

$('.ids').click(function () {
    //...
});

Then you can handle your logic in a cleaner way within the function body.

Answer 4

In order to make it dynamic, and not have to repeat the code for each one of your numbers, I suggest doing as follows:

First, add a class to all the div's you want to be clickable .clickable , and then use the id of the clicked event, replacing A with B in order to select the element you what to toggle the class:

$(".clickable").click(function(){
    var id = $(this).attr('id');
    $("#" + id.replace('A', 'B')).toggleClass("hide");
});

Or, you can also select all divs and use the contains wildcard:

$("div[id*='idA_']").click(function(){
    var id = $(this).attr('id');
    $("#" + id.replace('A', 'B')).toggleClass("hide");
});

This solution won't have the need to add a class to all clickable divs.

Answer 5

You can use attribute selector begins with to target the id's you want that have corresponding elements.

https://api.jquery.com/attribute-starts-with-selector/

Then get the value after the understore using split on the id and applying Array.pop() to remove the 1st part of the array.

http://jsfiddle.net/up9h0903/

$("[id^='idA_']").click(function () {
    var num = this.id.split("_").pop();
    $("#idB_" + num).toggleClass("hide")
});

Using regex would be your other option to strip the number from the id.

http://jsfiddle.net/up9h0903/1/

$("[id^='idA_']").click(function () {
    var num = this.id.match(/\d+/g);
    $("#idB_" + num).toggleClass("hide")
});