CODEWITHSUNDEEP
javascriptphpjqueryhtml
k4kuz0
k4kuz0

Reputation: 1045

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

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.

Upvotes: 1

Views: 88

Answers (6)

lizacodes
lizacodes

Reputation: 762

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

Upvotes: 2

ElDoRado1239
ElDoRado1239

Reputation: 4048

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

Upvotes: 0

Manolo
Manolo

Reputation: 26370

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)

Upvotes: 1

kamesh
kamesh

Reputation: 2424

try this i guess it will work....example here

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

Upvotes: 0

Raja Asthana
Raja Asthana

Reputation: 2100

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
});

Upvotes: 0

Satish Sharma
Satish Sharma

Reputation: 9635

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
        });
});

Upvotes: 0

Related Questions