I've made a simple jQuery script which stores values "voted1", "voted2", "voted3" in localStorage. The problem is that on click it stores all values at the same time, and I need it per click as it should be later called (e.g. if "value3" exists begin jQuery logic...)
I can't figure this out, after weeks of testing..
HTML:
-
[gallery link="none" size="medium" ids="102,13,27,25,23,15" orderby="rand"] <div class="exists" style="display: none;">Thank you for voting!</div>
CSS:
-
.gallery-item a { background-color: black; border: 1px solid orange; border-radius: 6px; color: orange; display: inline-table; font-size: 14px; font-weight: bold; max-width: 100%; width: 32%; } .exists { background-color: black; border-radius: 18px; box-shadow: 1px 3px 20px -3px grey inset; display: block; height: 32%; left: 24%; margin-left: 10%; margin-right: 10%; margin-top: 10%; max-width: 100%; padding-left: 12%; padding-top: 6%; position: fixed; top: 23%; width: 36%; z-index: 999999; color: olivedrab; font-weight: bold; cursor: context-menu; } .voted { background-color: green !important; }
jQuery:
-
$(document).ready(function() { var voteLink = $('.gallery-item a'); var votedYes = $('.exists'); voteLink.one('click', function() { // localStorage.setItem('voted1', 'yes1'); $(this).text('Thank you!'); $(this).addClass('voted'); }) voteLink.one('click', function() { // localStorage.setItem('voted2', 'yes2'); $(this).text('Thank you!'); $(this).addClass('voted'); }) voteLink.one('click', function() { localStorage.setItem('voted3', 'yes3'); $(this).text('Thank you!'); $(this).addClass('voted'); if($('.voted').length === 3){ voteLink.fadeOut('slow'); $('.exists').fadeIn(1800); } if (localStorage.getItem("voted3")) { voteLink.remove(); votedYes.fadeIn(1800); } });
As I said, on first click it places all values in localStorage and I need this separated. So, each click should store different value in localStorage and not overwrite it. I'm trying to call the "voted3" and if found then the jQuery logic continues.
Thanks guys.