How can several HTML elements be referred to, for use in javascript/jQuery functions?

Question

I have an issue with my code, because I usually use (for buttons, for example) an ID to refer to the element, such as:

 $(document).ready(function () {
     $('.delete_imgs').click(function () {
         id = $(this).attr('id');
         $('.confirm_delete').css({
             visibility: "visible"
         });
     });
 });

So the above being, if any of the .delete_imgs buttons are click, then perform the function. And also using the this function to refer to the element being clicked on in the HTML document.

The above id 's are from a php function here:

                while($stmt -> fetch()){
                    echo "<tr><td>
<img class='delete_imgs' id='$matchid' src='Images/delete_icon.png'>
<img class='edit_imgs' id='$matchid'src='Images/edit_icon.png'></td>
                            <td>$hero</td>
                            <td>$result</td>
                            <td>$gamemode</td>
                            <td>$mmr</td>
                            </tr>";         
                }

This was fine before the edit_imgs image was added, because all of the delete_imgs would have a different ID (the match ID is unique). However now, I shouldn't have BOTH the edit and delete images with the same ID, so I'm not sure how I can refer to them for a javascript/jQuery function.

I apologise if this is quite a broad question, I can add more information if necessary:

A shorter version of the question: How do you refer to several HTML element without using ID's or Classes?

Edit: Here is what I will eventually be using the ID for:

function deletematch(){
    $.ajax({
        type:"POST",
        url:"php/RemoveMatch.php", //This code sends the variable with the match
        data: "match_id=" + id,  //id in it to the php file and executes the deletion.
        success: function(){
            alert("The match has been deleted");
            $('.confirm_delete').css({visibility:"hidden"});
        }
     });
}

The editmatch isn't coded yet.

Answer 1

Try using the data attribute instead of "id". That way they can both share the same ID without having to break standards. Note that I'm assuming "delete_imgs" and "edit_imgs" have their own style so I have avoided altering those.

 while($stmt -> fetch()){
     echo "<tr><td>
         <img class='delete_imgs' data-id='$matchid' src='Images/delete_icon.png'>
         <img class='edit_imgs' data-id='$matchid'src='Images/edit_icon.png'></td>
         <td>$hero</td>
         <td>$result</td>
         <td>$gamemode</td>
         <td>$mmr</td>
     </tr>";         
 }

You can then get the ID in your JS like so:

 $('.delete_imgs').click(function () {
     id = $(this).data('id');
 });

You can also select both of them:

$('[data-id="id-goes-here"]').click(function() {
    // do something
});

However if you want a simple way to refer to both of them without knowing the ID, I would add another data attribute or a class. For example

// You can use the selector above: $('[data-type="action"]')
<img class='delete_imgs' data-type="action" data-id='$matchid' src='Images/delete_icon.png'>
<img class='edit_imgs' data-type="action" data-id='$matchid'src='Images/edit_icon.png'>

Or

// Select with: $('.action')
<img class='delete_imgs action' data-id='$matchid' src='Images/delete_icon.png'>
<img class='edit_imgs action' data-id='$matchid'src='Images/edit_icon.png'>

Answer 2

In this case, when you have more than one element, you should use class.

           while($stmt -> fetch()){
                echo "<tr><td>
                        <img class='delete_imgs '".$matchid." src='Images/delete_icon.png'>
                        <img class='delete_imgs '".$matchid." src='Images/edit_icon.png'></td>
                        <td>$hero</td>
                        <td>$result</td>
                        <td>$gamemode</td>
                        <td>$mmr</td>
                        </tr>";         
            }

Now you're able to use $(.delete_imgs.desiredMatchId)

You also can use both like this:

$(img.class.class)

Answer 3

try this

$(document).ready(function(){
        $('.delete_imgs').click(function(){
            id = $(this).attr('id'); 
            $('.confirm_delete').css({visibility:"visible"});
        });

        $('.edit_imgs').click(function(){
            id = $(this).attr('id'); 
            // do your edit work here
        });
});

Answer 4

Using the same ID for two elements is not advisable in HTML. Append some counter after the id like

<img class='delete_imgs' id='$matchid + _counter' src='Images/delete_icon.png'>
<img class='edit_imgs' id='$matchid + _counter'src='Images/edit_icon.png'>

For your scenario refer like,

$('img.delete_imgs').click(function() {
   //Your logic goes here
});

$('img.edit_imgs').click(function() {
   //Your logic goes here
});

or

 $('img.delete_imgs, img.edit_imgs').click(function() {
     //Your logic goes here
});

Answer 5

尝试这个我想它会起作用.... 这里的例子

$('img#matchid .delete_img').click(function(){...});

Answer 6

How about using something like this :

function clickFunction(){
    if(this.alt == 'delete'){
        ...
    }
    if(this.alt == 'edit'){
        ...
    }
};

And then give your buttons alt value "delete" or "edit".