Question

我目前正在完成一项任务，我必须显示某个菜单的购物清单。当用户单击某个项目时，它必须存储在cookie中。

为了能够在不改变我的jQuery的情况下将项目添加到购物清单，我写了一个循环。它工作正常，我可以存储和取消设置cookie，但是，我只能点击两次项目。如果该项目已经存储，然后我删除了cookie，我只能点击一次列表项。

HTML

<section class="ingredients cd-scrolling-bg">
    <div class="container12">
        <div class="row">
            <div class="column6">
                <h1>Ingredienten</h1>
                <p>Om heerlijke varkenswangetjes klaar te maken, hebt u de volgende ingrediënten nodig. Klik/tik de ingrediënten aan als u ze heeft aangekocht of al in huis hebt.</p>
                <ul>
                    <li class="ingredient-item">2 uien</li>
                    <li class="ingredient-item">1 teentje look</li>
                    <li class="ingredient-item">1 bruine boterham</li>
                    <li class="ingredient-item">2 eetlepels pittige graantjesmosterd</li>
                    <li class="ingredient-item">2 eetlepels bruine suiker</li>
                    <li class="ingredient-item">4 flesjes Sint-Bernardus Abt 12</li>
                    <li class="ingredient-item">Bakboter</li>
                    <li class="ingredient-item">1 bouquet garni</li>
                    <li class="ingredient-item">1 kruidnagel</li>
                    <li class="ingredient-item">peper</li>
                    <li class="ingredient-item">zout</li>
                    <li class="ingredient-item">1 kg ontvliesde varkenswangen</li>
                </ul>
            </div>
        </div>
    </div>
</section>

JQUERY

var listCount = $('.ingredients ul li').length;
var i;
$('.ingredients ul li').each(function(i){
    i++;
    $(this).attr('id', 'ingredient-'+(i));
    $('#ingredient-'+(i)).on('click', function(){
        $.cookie("ingredient-"+(i), $(this).html(), {expires: 1000});
        $("#ingredient-"+(i)).on('click', function(){
            $('#ingredient-'+(i)).removeClass("strike");
            $.cookie("ingredient-"+(i), null);
        });
    });
    if($.cookie("ingredient-"+(i))){
        $("#ingredient-"+(i)).addClass("strike");
        $("#ingredient-"+(i)).on('click', function(){
            $('#ingredient-'+(i)).removeClass("strike");
            $.cookie("ingredient-"+(i), null);
        });
     }
    if(i>=12){
        return false;
    }
});

我不知道是什么导致它...我没有制作CodePen，因为我猜它不会保存饼干和东西......我不知道它是否重要，但我正在使用Klaus Hartl的cookie插件（https://github.com/carhartl/jquery-cookie）。

提前致谢此致

单击2次后，Click-event将被禁用

0 个答案: