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>

当符合jQuery标准时，将显示带有HTML的类.exists。

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")
}

如何逐个计算jQuery中的localStorage值

1 个答案: