javascript - jQuery - 将通知标记为已读

Question

我正在使用 bootstrap，我发现了一个非常好看的管理模板。此模板提供了在主导航中显示特定通知的可能性。如果我点击通知图标，会出现一个小弹出窗口，我可以在其中看到通知。

你可以在这里看到:

因此，我在左侧输入了绿色复选框，如果用户单击复选框，通知将标记为已读并从通知面板中消失。到目前为止，我的问题是我用 PHP 解决了这个解决方案，一旦我点击绿色复选框，整个页面就会重新加载。我现在正在寻找一个 jQuery 解决方案，以便在选中绿色复选框后页面不需要重新加载。因此，如果用户点击绿色复选框，通知应该会消失而无需重新加载页面。

我当前的代码是:

<?php
 <ul class='dropdown-menu dropdown-navbar'>
    <li>
        <a href='./index.php?func=showsms&id=".$msg["id"][$x]."&sid=$sid' target='_blank' class='clearfix'>
            <div class='col-sm-3'>
                <span class='msg-time'>
                    <a class='btn btn-success btn-xs' href='./index.php?func=$func&read_sms=".$msg["id"][$x]."&sid=$sid' role='button'><i class='ace-icon fa fa-check  bigger-110 icon-only'></i></a>
                </span>
                </span>\
            </div>
            <div class='col-sm-9'>
                <a href='#messagebox_".$msg["id"][$x]."' role='button' class='green' data-toggle='modal'>
                    <span class='msg-body'>
                        <span class='msg-title'>
                            <span class='blue'>".$sender["firstname"][0]." ".$sender["lastname"][0].":</span>
                        $msg["smstitle"][$x]
                    </span>

                    <span class='msg-time'>
                        <i class='ace-icon fa fa-clock-o'></i>
                            <span>".date("d.m.Y H:i",$msg["time_created"][$x])."</span>
                    </span>
                </a>
            </div>
    </li>
</ul>
?>

有人能告诉我我需要如何更改代码才能获得与 jQuery 效果相同的解决方案吗？我不擅长用 jQuery 编码。如果有人可以帮助我并告诉我我的代码应该是什么样子，那就太棒了。

谢谢，克里斯

Answer 1

您写的是 HTML 而不是 PHP 代码!我相信应该有一个类可以将它更改为不同的颜色(阅读通知)。所以，你需要做的是:

$(".dropdown-menu dropdown-navbar li a").click(function () {
  $(this).closest("li").addClass("read");
  // The above code will make the presentation look read.
  // Now make it really read:
  $.post("notification.php", {id: the_post_id, action: read});
  return false;
});

注意:我没有阻止点击链接的默认操作，因为当你点击链接时，它会触发读取操作，对吗？

我希望在 PHP 中，当您呈现 HTML 时，您会:

<li class="otherClass newClass type <?php if ($isRead) echo "read"; ?>">