javascript - How to set cookie onclick for changing background -

javascript - How to set cookie onclick for changing background -

i seek alter background of div onclick , preserved cookie. here code. firstly can't realize if cookie has been set , secondly if can alter background value of cookie.

can help idea?

<div class="container"> <div class="col-md-6"> <div class="one"><a id="1" onclick="addcookie()" href="#">fisrt link</a></div> </div> <div class="col-md-6"> <div class="two"><a id="2" onclick="addcookie()" href="#">second link</a></div> </div> </div> <script src=js/jquery-1.11.1.js></script> <script src="js/jquery.cookie.js"></script> <script> var cookiename = 'cookie1'; function addcookie(){ var date = new date(); var minutes = 5; date.settime(date.gettime() + (minutes * 60 * 1000)); var idi = getdocumentbyid(this.id); var cookievalue = "http://path image/image"+idi+".png"; $.cookie(cookiename, cookievalue, { expires: date }); $('.one').css('background', $.cookie('cookiename')); } </script> <script src=js/bootstrap.js></script> </body>

other @george pointed out in comment (replace getdocumentbyid() - non-existent native function - document.getelementbyid()), you'll have create sure you're adding image url coded properly, os instead of...

$('.one').css('background', $.cookie('cookiename'));

...do this...

$('.one').css('background', 'url("' + $.cookie(cookiename) + '")');

this proper css syntax including background url's not...

class="lang-css prettyprint-override">background:http://path image/image.png

...but...

background:url("http://path image/image.png");

...and because if want utilize variable function's parameter, have omit quotes around it, ie. $.cookie('cookiename') becomes $.cookie(cookiename).

additionally, this.id homecoming id of element if pass this parameter of inline function follows:

onclick="addcookie(this)"

...then reference same in function this:

function addcookie(that)

...and utilize this:

var idi = that.id;

here jsfiddle can seek this: http://jsfiddle.net/yxj8w6d0/

edit: few little modifications (remove one , two classed divs, , add together no-repeat background) have neat little way of adding background element in question, assuming it's wanted achieve: http://jsfiddle.net/yxj8w6d0/1/

edit #2: images loaded if cookie exists, create function fires on document ready going through links , checking them against existing cookies, follows:

$(document).ready(function() { $('.container div a').each(function(){ if ($.cookie(this.id)) $(this).css('background', 'url("' + $.cookie(this.id) + '") no-repeat'); }); });

i updated above fiddle accordingly. seek clicking links first, running script 1 time again - you'll see links maintain background: http://jsfiddle.net/yxj8w6d0/2/

javascript jquery css cookies background