Jquery save multiple cookie for every link

I have lots of links in the page, click each one addClass ‘voted’ to this link. then save the effection into cookies. so that next time refresh web browser, it will save the addClass event.

I use jquery cookie here: https://github.com/carhartl/jquery-cookie

My code here, but it will only save 1 cookie. I mean if I clicked link 1, link 2. it always remember the last click. refresh the web browser. only link 2 addClass ‘voted’. link1 missed addClass event. so how to save multiple cookie for every link? Thanks.

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var cookieName = 'up';
  var cookieOptions = {expires: 7, path: '/'};  

  $("#" + $.cookie(cookieName)).addClass('voted');

  $(".up").live('click',function(e){
    e.preventDefault();    
    $.cookie(cookieName, $(this).attr("id"), cookieOptions);
    // save cookie depends on each link id. 
    $("#" + $.cookie(cookieName)).addClass('voted');
  });
});
</script>

<a href="javascript:void(0)" id="m12345678" class="up">link 1</a>
<a href="javascript:void(0)" id="m12345679" class="up">link 2</a>
<a href="javascript:void(0)" id="m12345680" class="up">link 3</a>

I upload my code for demo here jsfiddle

You would need to set unique cookie name identifiers in order for your code to work properly, one way to do this would be to add the unique id from the element as part of the cookie name and run a loop on each page load to set the class for each element. See the below example:

$(function() {
    var cookieName = 'up_';
    
    $('.up').each(function() {
        var id = $(this).attr('id'), cookie = cookieName + id;
        
        if ($.cookie(cookie) !== 'undefined') {
            $(this).addClass('voted');
        }
    }).live('click', function(e) {
        e.preventDefault();
        $.cookie(cookieName + $(this).attr('id'), true);
    });
});

hi SgtLegend, thanks for your answer, but this will automatic addClass voted when my page first loaded.

I need user clicked each one, then add class to each one and remember in the cookies.

Have you tested the code?? I ask because i just looked over it and the only way for the voted class to be added is if the cookie value returns as something other then undefined.

I don’t mean to sound blunt but there is just no way for the above code to set the class without the cookie first been set as i have used the jQuery cookie plugin before and if the value is undefined the cookie hasn’t been set yet in the browser.

SgtLegend

see on:
http://jsfiddle.net/RQP4T/3/

Sorry my bad, simply change undefined to null and it will work correctly. Sorry about second guessing you, i have a chest cold which is getting the better if me.

both null, undefined or even set empty, all not worked. it will add class when the page loading.
see: http://jsfiddle.net/RQP4T/4/

by the way, is it necessary store 3 links cookies with a json data for read or write?

I am newer for jquery cookie. waiting for your help and search via google for study more.

Thanks again.

Giberno

solved, also thanks. refrence here: http://stackoverflow.com/questions/2101417/jquery-save-class-state-for-multiple-div-s-to-a-cookie

set:

   if ($.cookie(cookie) !== 'ture') {
        $(this).addClass('voted');
    }