将动态 id 添加到 jquery 选择器

Question

I am using a plugin named as Ladda which basically does is adds a loader when the button in clicked! I am populating a table from the database and adding these button in the last column of every row! Here's my initial code

<?php

                $query="select client_id,fullname,email,status
                 from atom_users ORDER BY id DESC";

                $stmt = $db->prepare($query);
                if($stmt){
                    $stmt->execute();
                    $stmt->bind_result($id,$fullname,$email,$status);
                    while ($stmt->fetch()) 
                    {

        ?>
         <tr>
        <td><?= $id?></td>
        <td><?= $fullname?></td>
        <td><?= $email?></td>
        <td><?= str_replace("-"," ",$status)?></td>
        <?= ($status=="archive" ? $status2='Un-Archive' : $status2="Archive");?>
        <td>

                <button class="ladda-button <?=$id?>" data-color="green" data-style="expand-left" onclick="val('<?= $id?>','<?= $status2?>')">
                <?= $status2?>
                </button>
            </td>
         </tr>
        <?php } 
                    $stmt->close();
                } ?>

What am I doing here is fairly simple just outputting data and in this code there is button! Now for every button to be unique I've added an $id variable to class of each button so that when loader is run on click of a button it runs on the button that is pressed. Now here's the function:

function val(id,status){
      alert(id);
      alert(status);
       //original line
       //var l = Ladda.create( document.querySelector( '.button-demo #btn' ) );
         //dynamic 
            var l = Ladda.create( document.querySelector( '."'.+id+.'"' ) );
            l.start();
            }

Now the issue is straight forward the two lines

var l = Ladda.create( document.querySelector( '."'.+id+.'"' ) );
            l.start();

are creating the loader now I want to add the id received in the function into the querySelector so that it works dynamically I have tried a lot but it is not accepting id! any recommendations?

Answer 1

As you had mentioned, your ID is a number. While it's acceptable in HTML for ID's and classes to start with numbers, selectors will not work properly for these.

So, first, you can prefix your class so that it doesn't start with a number. This will allow us to find it without having to do any crazy escaping with our selectors:

<button class="ladda-button myClass_<?=$id?>" data-color="green" data-style="expand-left" onclick="val('<?= $id?>','<?= $status2?>')">

Now that our class is "findable", we can modify the querySelector to find it properly:

var l = Ladda.create(document.querySelector(".myClass_"+id));

This should solve your issue.