Question

我有一个通知/收件箱页面，其中向用户显示收件箱邮件列表，我希望他们能够使用JQuery将每条邮件标记为正在阅读或查看。我现在有这个代码：

<?php echo "<a href=\"#\" id=\"readLink\" data-note=\"$note_id\" class=\"red\">Mark As Read</a>"; ?>

<script type="text/javascript">
$('#readLink').on('click', function()
{
    var note = $(this).attr("data-note");
    jQuery.post("php/note-read.php", {
        note:note
    },  function(data, textStatus){
            if(data == 1){
                $('#readLink').html("Note Read");
            }
    });
    return false;
});
</script>

此脚本对于显示的最后一条消息完全正常，即20条列表中的最上面的第一条消息，但不适用于任何其他消息。任何人都可以看到一种方法使其适用于列表中的任何消息吗？

Answer 1

我认为决定设置class，而不是id。代码如下所示：

<?php echo "<a href=\"#\" class=\"readLink\" data-note=\"$note_id\" class=\"red\">Mark As Read</a>"; ?>

<script type="text/javascript">
$('.readLink').on('click', function()
{
    var $link = $(this);    //remember 'this' in a variable...
    var note = $(this).attr("data-note");
    jQuery.post("php/note-read.php", {
        note:note
    },  function(data, textStatus){
        if(data == 1){
            $link.html("Note Read");   //...and use this variable, because 'this' would not be the link
        }
    });
    return false;
});
</script>

Answer 2

用类
将$('.readlink').html("Note Read");替换为此that.html("Note Read");，以便在输入帖子之前只更新所选/点击链接，这是$（this）

更新了JS

<?php echo "<a href=\"#\" class=\"readLink\" data-note=\"$note_id\" class=\"red\">Mark As Read</a>"; ?>

<script type="text/javascript">
$('.readLink').on('click', function()
{

    var that = $(this);
    var note = that.attr("data-note");
    jQuery.post("php/note-read.php", {
        note:note
    },  function(data, textStatus){
            if(data == 1){
                that.html("Note Read"); //replace readlink class with this 
            }
    });
    return false;
});
</script>

JQuery在多个属性之一上运行函数

2 个答案: