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

jQuery - 将通知标记为已读

1 个答案: