jquery更多点击函数使用数据属性

jquery more click function using data attribute

本文关键字：数据属性 函数 多点 jquery      更新时间：2023-09-26

我必须链接多个内容(数据库查询的结果(。我试着使用多个点击功能，但网站真的很慢，所以我试着这样做。

PHP编写的HTML元素：

<img id="click" src="images/like.png" alt="" width="80%" data-event="'.$rows[$i][id].'"/>

jQuery代码：

<script>
    $(document).ready(function()
    {
        $('#click').click(function()
        {
            var id = $(this).data('event');
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();                   
                xmlhttp.open("GET","likes.php?eid="+id+"&ip=IPADDRESS",true);
                xmlhttp.send();
            }
            document.location = "index.php";
        });
    });
</script>

但它只适用于第一个元素。。。

$("#click")

将只返回第一个元素。因为ID必须是唯一的。

相反，将其更改为class，它将工作

$(".click")

这将返回所有图像的列表

但是你仍然可以对上面的HTML进行修改，但我不推荐它

$("img[id^=click]") // don't use this ever , just to know even this will work

通过以下方式更改代码：

<img class="like" src="images/like.png" alt="" width="80%" data-event="'.$rows[$i][id].'"/>

和你的jQuery代码

<script>
    $(document).ready(function()
    {
        $('.like').click(function()
        {
            var id = $(this).data('event');
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();                   
                xmlhttp.open("GET","likes.php?eid="+id+"&ip=IPADDRESS",true);
                xmlhttp.send();
            }
            document.location = "index.php";
        });
    });
</script>

С可能是使用ID而不是class的原因尝试更改#click .click

相关文章：