Question 35667 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to Click many buttons by jquery for loop

I’m trying to call many button by one jquery function. following is my html and php code:

Elements of button:

    for($q_no=1;$q_no<=30;$q_no++){
            echo('<button class="q_no_btn" id="'.$q_no.'">Question no '.$q_no.'</button>');
        }

My Jquery code:

$(document).ready(function(){
    var q_no;
    for(q_no=1;q_no<=30;q_no++){
        $("#"(q_no).click(function(){
            alert("Click on 1!!!");
    
        }))
    }
});

I’m poping up the content to popup box, by clicking on the buttons.

please help.

Tags:

2

Answers


  1. 0

    You have misspelled when calling your id parameter with jQuery.

    If you change the $("#"(q_no) field as below, the problem will be solved. Also, you wrote one extra bracket.

    $(document).ready(function(){
    var q_no;
    for(q_no=1;q_no<=30;q_no++){
        $("#"+q_no).click(function(){
            alert("Click on 1!!!");
        });
    }
});

    Also you can use below code, you no need to use loop in jquery.

    $(".q_no_btn").on('click',function(){
    var ids = $(this).attr("id");
    alert("Click on "+ ids +"!!!");
});
    Login or Signup to reply.
  2. 0

    loop

    We are using the fact that let is used for defining block-scoped variables to our advantage. We create a q_no variable using let in our for and define the click function inside this block, so each handler will have its own, correct q_no.

    let buttons = "";
for (let q_no = 1; q_no <= 30; q_no++) {
    buttons += '<button class="q_no_btn" id="' + q_no + '">Question no ' + q_no + '</button>';
}

document.body.innerHTML = buttons;

for (let q_no = 1; q_no <= 30; q_no++) {
    $("#" + q_no).click(function() {
        alert("Click on " + q_no);
    });
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    loop is not even needed

    let buttons = "";
for (let q_no = 1; q_no <= 30; q_no++) {
    buttons += '<button class="q_no_btn" id="' + q_no + '">Question no ' + q_no + '</button>';
}

document.body.innerHTML = buttons;

$(".q_no_btn").click(function(obj, index) {
    console.log(1 + $(this).index());
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    In Javascript, indexing starts from 0, so we add 1 to it.

    Without jQuery

        let buttons = "";
    for (let q_no = 1; q_no <= 30; q_no++) {
        buttons += '<button class="q_no_btn" id="' + q_no + '">Question no ' + q_no + '</button>';
    }

    document.body.innerHTML = buttons;
    
    let items = [...document.getElementsByClassName("q_no_btn")];
    
    for (let item of items) {
        item.addEventListener("click", function() {
            alert(items.indexOf(item) + 1);
        });
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search