jQuery Проверка Cook ie и скрытие контента на основе значений и атрибутов данных

Question

У меня есть список купонов, которые все имеют атрибуты данных (data-coupon) на странице. В настоящее время я устанавливаю файлы cookie и сохраняю значение в паре со значением купона данных (от 1 до 4). На данный момент у меня это работает, но код, который я написал, очень повторяется, и, поскольку я не слишком хорошо разбираюсь в jQuery и файлах cookie, я надеялся прийти сюда и посмотреть, сможет ли кто-нибудь указать мне правильное направление, как упростить этот сценарий. В идеале, я хотел бы иметь возможность сопоставить повар ie, выбранный купон и его значение с соответствующим атрибутом данных купона, которому он соответствует, и отображать только этот купон на странице refre sh, скрывая остальные , Но в настоящее время я использую этот метод ниже

$(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, который вы выбираете. Так как это соответствует значению повара ie, просто объедините их вместе:

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

Обратите внимание, что || используется для значения по умолчанию 1, если нет повара ie , Я бы также предложил скрыть элементы .coupons в CSS вместо JS, чтобы избежать FOU C.