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

我有一个优惠券列表，所有优惠券在一个页面上都有数据属性（数据优惠券）。我目前正在设置cookies并存储与数据优惠券值配对的值（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');
  }
  });

---

在这些条件之间唯一发生变化的是您选择的

id

。由于这与cookie的值相匹配，只需将它们连接在一起：

jQuery（$=>{
$（'.coups'）.hide（）；
$（“#优惠券”+（$.cookie（'selected-优惠券'）| |'1'））.show（）.removeClass（'hide col-sm-6'）.addClass（'col-sm-12'）；
});

---

请注意，如果不存在cookie，则使用

|

将默认值设置为

1

。我还建议在CSS中隐藏

.coups

元素，而不是JS，以避免出现问题。

如果我已经有了下面的逻辑，如果cookie不存在，这不会覆盖它吗？它不会覆盖它，但会使它的用途变得多余。