1

我正在尝试制作像 Facebook 收件箱一样的左导航链接。有 3 种不同的 div 1. 未读（浅蓝色） 2. 已读（白色） 3. 已选（深蓝色）

实际上，如果我以正常方式进行操作，这很容易。这意味着我每次点击阅读每条消息时都需要重新加载页面。

但是这种情况下，我想完全用ajax方式来做。我已经完成了所有的工作。但是在最后一步解决问题。

思路是：我使用cookie（jquery.cookie插件）来存储最后点击的div id然后当我每次点击div阅读消息时，最后点击的div id必须变成白色。（因为该消息已被阅读）。

当我单击未读消息 Div. 有一个问题： 未读消息 Div 再次变成浅蓝色

我使用了很多普通的 javascript 和 jQuery 方法。

好吧，让我们先看看我的 div： Example div: ::: div 的 id 是来自数据库的数组，但在这里我很容易看到。

<div id ='001' class='normal' onclick=readmsg(id_msg1)></div>
<div id ='002' class='normal' onclick=readmsg(id_msg2)></div>
<div id ='003' class='normal' onclick=readmsg(id_msg3)></div>

在 Javascript 中

function readmsg(id_msg) // or 2 or 3 & so on .....


 $.cookie('last_read', id_msg1);// set cookie at once



document.getElementById(id_msg1).className = "inbx_selected"; // div clicked just now--> selected:let´s say dark blue./// I have no problem with this.

这就是我为了将类未读 --> 更改为类已读所做的全部尝试。

var ck= $.cookie('last_read');  

    $("#"+id_msg).addClass('inbx_unread'); // 

    $("#"+last_read).removeClass('inbx_unread');// get the last ID of clicked div and remove class unread which´s light-blue

我也尝试过普通的javascript，如：

document.getElementById(last_read).className.replace("inbx_unread","");

// 我这里有更多代码但是正如我上面提到的，我已经完成了。唯一的问题是单击其他 div 后未读（浅蓝色）再次变回浅蓝色。

我已经检查了萤火虫和警报，我得到了正确的值。

我不知道像 cookie 那样存储临时数据的其他方法。

更简短的问题，如何停止单击另一个 div 后单击以再次返回其原始类的未读 Div ？

4

1 回答 1

2

这是一种略有不同的方法。你可以只使用 jQuery 事件。

HTML

<div id ='001' class='message unread'>Message 1</div>
<div id ='002' class='message unread'>Message 2</div>
<div id ='003' class='message unread'>Message 3</div>

和 jQuery：

$(document).ready(function(){

    $(".message").click(function() {

        // we get the clicked element ID
        var id_msg = $(this).attr('id');

        // we read the cookie, to remove the previous selected class to the last_read element
        var last_read = $.cookie('last_read');
        $('#' + last_read).removeClass("inbx_selected");

        // we set the cookie, so we keep can remove the selected class in the next click
        $.cookie('last_read', id_msg);

        //
        // probably, here you should do some AJAX post to update the message status at the database
        // 

        // we remove the unread class, and add teh selected class
        $(this).removeClass("inbx_unread").addClass("inbx_selected");

    });

});

你可以检查一个工作的jsfiddle：http: //jsfiddle.net/QaMJZ/1/

希望对你有帮助，祝你好运！

于 2013-09-03T02:16:27.683 回答