Question

所以我有以下代码使用cookie插件影响一些页脚标记。现在我有点像n00b，并且无法找到一种方法来使代码更具动态性。现在我必须复制每个变量并为每个“退出”创建一个新变量。我想知道是否有可能使if语句更具动态性？请注意，每个#exit位于不同的子页面上，所有子页面都链接到main.js文件。

链接：http://www.carlpapworth.com/htmlove/index.html

jQuery代码：

$('#exit1').click(function(){
$('#collection1').css('color', '#ff63ff');
$.cookie('foundHeart1', 'found', {
    path: '/'
});
});

var foundHeart1 = $.cookie('foundHeart1');

if (foundHeart1 == 'found'){
    $('#collection1').addClass('found');
};

    $('#exit2').click(function(){
$('#collection2').css('color', '#ff63ff');
$.cookie('foundHeart2', 'found', {
    path: '/'
});
});

var foundHeart2 = $.cookie('foundHeart2');

if (foundHeart2 == 'found'){
    $('#collection2').addClass('found');
};

Answer 1

您可以通过向元素添加元数据并为其提供所有共享类而不是ID来轻松实现此目的

所以，说你当前的#exit1，#exit2等是链接，给他们一个exit类，并添加一些额外的data-*以供日后使用：

<a href="#" class="exit" data-key="1">Exit</a>
<a href="#" class="exit" data-key="2">Exit</a>

然后你可以有一个处理程序来执行每个退出：

$('.exit').click(function(){
    var key = $(this).data('key');
    $('#collection' + key).css('color', '#ff63ff');
    $.cookie('foundHeart' + key, 'found', {
        path: '/'
    });
});

现在你可能有2个页面，所有页面都使用退出按钮的相同代码，但看起来你想在每个页面加载时检查它们，这样就足够了：

var maxCookie = 2; // or whatever your number of hearts is
for(var i=1;i<=maxCookie;i++){
   if($.cookie('foundHeart' + i) == 'found'){
       $('#collection' + i).addClass('found')
    }
}

压缩jQuery代码并使其更具动态性

1 个答案: