After spending an excessive amount of time on this project, I have hit a roadblock. Despite days of testing, I am unable to achieve my desired outcome.
I am developing an image voting system that will track votes in localStorage. Since this is within WordPress, there isn't much HTML involved.
Below is the code snippet along with a brief explanation of each step:
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>
The .exists class within the HTML is designed to be displayed when certain jQuery criteria are met.
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;
}
This should provide clarity on the design.
jQuery:
$(document).ready(function() {
var voteLink = $('.gallery-item a');
var votedYes = $('.exists');
voteLink.on('click', function() {
event.preventDefault();
localStorage.setItem('voted1', 'yes1');
$(this).text('Thank you!');
$(this).addClass('voted');
})
});
$(document).read...
Despite logging all votes in localStorage (as 'voted1', 'voted2', and 'voted3') upon the first click, an unintended logic continues to unfold due to the triggering of "voted3." How can I prevent this? Is it possible to store the value only upon clicking?
Your insights would be greatly appreciated.