Question

我试图像Facebook收件箱一样制作Left Nav链接。有3种不同的div 1.未读（淡蓝色）2.read（白色）3。选择（深蓝色）

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

但是这种情况，我想完全以ajax方式完成。我完成了所有的工作。但是在最后一步得到问题。

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

当我点击未读消息Div时。有一个问题： 未读消息Div再次变为浅蓝色

我使用了很多正常的javascript和jQuery方法。

让我们先看看我的div： 示例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.

这就是我为了改变未读类而尝试的所有内容 - ＆gt;上课阅读。

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再次回到原来的类？

Answer 1

这是一种略有不同的方法。你可以只使用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/

希望它有所帮助，祝你好运！

选择Div - 未读消息 - 读取Facebook收件箱等消息

1 个答案: