Div选择

Div选择 - 未读消息 - 阅读像facebook收件箱一样的消息(Div selected - Unread Message - read messsage like facebook inbox)

我试图像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.

这是我为了将类未读 - >更改为类读取而尝试的全部内容。

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转回原来的类？

I´m trying to make Left Nav link like facebook inbox. There´re 3 differences kinds of div 1. unread(light blue) 2.read(white) 3. selected(dark blue)

Actually it´s very easy if I do it in the normal way. Which mean I need to reload the page everytime I click to read each message.

But this case, I want to do it in ajax way completely. I have done all the job. But get the problem in last step.

The idea is : I use cookie (jquery.cookie plugin) to store the last clicked Div Id Then When I click on the div each time to read the message, The last clicked div id Must turn to be white. (Because the message has been read).

When I click on unread message Div. There´s a problem: the unread-message Div turn to be the light blue again

I use lots of method both normal javascript and jQuery.

Well let ´s see my div first: Example div: :::the id of div is array from database but here I make it easy to see.

<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>

In 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.

This is all I have tried in order to change the class unread --> to class read.

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

I have also tried the normal javascript like:

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

// I have more code here But as I mentioned above that I finished with that. The only one problem is the unread(light-blue) turn back to light-blue again after I click on other div.

I have checked in firebug and alert, I get correct value.

I don´t know other ways to store temporaly data like cookie does.

TO be shorter question, How to stop the unread Div that has been clicked to turn back to its original class again after I click on another div ?

最满意答案

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

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

Here is a slightly different approach. You could use just jQuery events.

the 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>

and the 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"); }); });

you can check a working jsfiddle: http://jsfiddle.net/QaMJZ/1/

hope it helps, good luck!