Question

我的代码存在问题，因为我通常使用（例如按钮）ID来引用元素，例如：

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

如上所述，如果点击任何.delete_imgs按钮，则执行该功能。并且还使用this函数将引用到HTML文档中单击的元素。

以上id来自php函数：

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

在添加edit_imgs图片之前这很好，因为所有delete_imgs都有不同的ID（匹配ID是唯一的）。但是现在，我不应该同时编辑和删除具有相同ID的图像，所以我不确定如何将它们引用到javascript / jQuery函数。

如果这是一个非常广泛的问题，我道歉，如有必要，我可以添加更多信息：

问题的较短版本：如何在不使用ID或类的情况下引用多个HTML元素？

编辑：以下是我最终将使用ID的内容：

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

编辑匹配尚未编码。

Answer 1

尝试使用data属性而不是“id”。这样他们就可以共享相同的ID，而不必违反标准。请注意，我假设“delete_imgs”和“edit_imgs”有自己的风格，所以我避免改变它们。

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

然后您可以像这样在JS中获取ID：

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

您也可以同时选择它们：

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

但是如果你想要一种简单的方法来引用它们而不知道ID，我会添加另一个数据属性或类。例如

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

或者

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

在这种情况下，当你有多个元素时，你应该使用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>";         
            }

现在您可以使用$(.delete_imgs.desiredMatchId)

了

你也可以这样使用：

$(img.class.class)

Answer 3

试试这个

$(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

在HTML中不建议对两个元素使用相同的ID。在id之后附加一些计数器

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

对于您的场景，请参阅，

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

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

或

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

Answer 5

尝试这个我想它会起作用.... example here

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

Answer 6

如何使用这样的东西：

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

然后给你的按钮alt值“删除”或“编辑”。

如何引用几个HTML元素，以便在javascript / jQuery函数中使用？

6 个答案: