javascript - 如何一一统计jQuery中的localStorage值

Question

我正在做更多我应该做的事情，但经过几天的测试后，我似乎找不到实现我在这里尝试做的事情的方法。

我正在制作一个图像投票系统，它将在 localStorage 中记录投票。这是在 WordPress 中，所以那里没有太多的 HTML。

这是代码，我将尝试简要解释每个步骤。

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>

类 .exists 将在满足 jQuery 条件时显示 HTML。

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.on('click', function() {
            event.preventDefault();
            localStorage.setItem('voted1', 'yes1');
            $(this).text('Thank you!');
            $(this).addClass('voted');
            })
        });
$(document).ready(function() {
    var voteLink = $('.gallery-item a');
    var votedYes = $('.exists');
        voteLink.on('click', function() {
            event.preventDefault();
            localStorage.setItem('voted2', 'yes2');
            $(this).text('Thank you!');
            $(this).addClass('voted');
            })
        });
$(document).ready(function() {
    var voteLink = $('.gallery-item a');
    var votedYes = $('.exists');
        voteLink.on('click', function() {
            event.preventDefault();
            localStorage.setItem('voted3', 'yes3');
            $(this).text('Thank you!');
            $(this).addClass('voted');
            voteLink.remove();
            $('.exists').show();
        });
        if (localStorage.getItem("voted3")) {
        voteLink.remove();
        votedYes.fadeIn(1800);
     } else {
    } 
});$(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).ready(function() {
    var voteLink = $('.gallery-item a');
    var votedYes = $('.exists');
        voteLink.on('click', function() {
            event.preventDefault();
            localStorage.setItem('voted2', 'yes2');
            $(this).text('Thank you!');
            $(this).addClass('voted');
            })
        });
$(document).ready(function() {
    var voteLink = $('.gallery-item a');
    var votedYes = $('.exists');
        voteLink.on('click', function() {
            event.preventDefault();
            localStorage.setItem('voted3', 'yes3');
            $(this).text('Thank you!');
            $(this).addClass('voted');
            voteLink.remove();
            $('.exists').show();
        });
        if (localStorage.getItem("voted3")) {
        voteLink.remove();
        votedYes.fadeIn(1800);
     } else {
    } 
});

这里发生了什么，第一次点击时所有投票都记录在 localStorage(voted1、voted2 和 voted3)中，然后因为触发了“voted3”，所以逻辑继续，因为它不应该有。我该如何防止这种情况？如何使该值仅在点击时存储？

非常感谢。

Answer 1

试试这个

if (localStorage.getItem("voted3") == "yes3") {
        voteLink.remove();
        votedYes.fadeIn(1800);
      localStorage.setItem("voted3","removel")
}