jQuery基于值和数据属性检查Cookie和隐藏内容

Question

我有一个优惠券列表，这些优惠券在一个页面上都有数据属性(数据优惠券(。我目前正在设置cookie并存储与数据优惠券值(1到4(配对的值。到目前为止，我已经开始工作了，但我写的代码非常重复，由于我不太熟悉jQuery和Cookies，我希望来到这里，看看是否有人能为我指明如何简化这个脚本的正确方向。理想情况下，我希望能够将cookie、所选优惠券及其值与匹配的优惠券的相应数据属性相匹配，并且只在页面刷新时显示该优惠券，同时隐藏其他优惠券。但目前，我在下面使用这种方法

$(document).ready(function() {
//if cookie is set, display only that container
if($.cookie('selected-coupon') == '1') {
$('.coupons').hide();
$('#coupon1').show();
$('#coupon1').removeClass('hide col-sm-6').addClass('col-sm-12');
}
if($.cookie('selected-coupon') == '2') {
$('.coupons').hide();
$('#coupon2').show();
$('#coupon2').removeClass('hide col-sm-6').addClass('col-sm-12');
}
if($.cookie('selected-coupon') == '3') {
$('.coupons').hide();
$('#coupon3').show();
$('#coupon3').removeClass('hide col-sm-6').addClass('col-sm-12');
}
if($.cookie('selected-coupon') == '4') {
$('.coupons').hide();
$('#coupon4').show();
$('#coupon4').removeClass('hide col-sm-6').addClass('col-sm-12');
}
});

Answer 1

在条件之间唯一变化的是您选择的id。由于这与cookie的值相匹配，只需将它们连接在一起：

jQuery($ => {
$('.coupons').hide();
$('#coupon' + ($.cookie('selected-coupon') || '1')).show().removeClass('hide col-sm-6').addClass('col-sm-12');
});

注意，如果不存在cookie，则||用于将值默认为1。我还建议将.coupons元素隐藏在CSS中，而不是JS中，以避免FOUC。