Скрыть раздел с атрибутом данных и на основе элемента localStorage - PullRequest
Новая
       3

Скрыть раздел с атрибутом данных и на основе элемента localStorage

0 голосов
/ 08 мая 2020

Моя идея состоит в том, чтобы скрыть некоторые разделы на основе спорта посетителей. Когда он впервые заходит на сайт, он будет видеть всплывающее окно. Это всплывающее окно имеет несколько кнопок, которые должны определять, какой контент он будет видеть дальше. Когда он нажимает кнопку, весь контент с выбранным видом спорта будет продолжать отображаться, а весь другой спортивный контент будет скрыт. Также, когда data-sport = "all", функция не должна скрывать этот раздел, влияющий на все другие виды спорта.

Я использовал localStorage () для сохранения этого параметра на устройстве, чтобы пользователь не мог каждый раз щелкать предпочтительный вид спорта. js должен быть al oop, потому что в localStorage () всегда есть элемент "stSport", и когда на устройстве нет этого элемента, запускается всплывающее окно, чтобы захватить спорт.

У меня есть это, но он не работает, если предположить, что что-то не так. Не могли бы вы мне помочь?

Заранее спасибо! :)

HTML: 

<section data-sport="soccer"></section>
<section data-sport="basketball"></section>
<section data-sport="all"></section>

<div id="sportsModal">
    <div id="sportsModal-group">
      <button onclick="sportRemove()" class="sportsModal-sport">All</button>
      <button onclick="sportExecute(soccer)" class="sportsModal-sport">Soccer</button>
      <button onclick="sportExecute(futsal)" class="sportsModal-sport">Futsal</button>
      <button onclick="sportExecute(basketball)" class="sportsModal-sport">Basketball</button>
      <button onclick="sportRemove()" class="sportsModal-sport">Other</button>
    </div>
</div>

CSS: 

#sportsModal {
    background-color: rgba(255,255,255,0.15);
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    z-index: 99999;
    left: 0;
}

#sportsModal-group {
    display: flex;
    flex-direction: column;
}

.sportsModal-sport {
    margin-bottom: 10px;
}

JS: 

function sportFunnel() {
  $("#sportModal").css("display", "fixed");
}

function sportExecute(n) {
  localStorage.removeItem("stSport");
  localStorage.setItem("stSport", n);
  var vstSports = localStorage.getItem("stSport");
  $("*[data-sport]").hide();
  var dataSport = "*[data-sport='" + vstSports + "']";
  var dataSportAll = "*[data-sport='all']";
  $(dataSportAll).show();
  $(dataSport).show();
}

$(document).ready( function() {
    if(!localStorage.getItem("stSport")){
        sportFunnel();
        var vstSports = localStorage.getItem("stSport");
    }
    else {
        var stSportChosen = localStorage.getItem("stSport"); 
        $("*[data-sport]").hide();
        var dataSport = "*[data-sport='" + stSportChosen + "']";
        var dataSportAll = "*[data-sport='all']";
        $(dataSportAll).show();
        $(dataSport).show();
    }
});

function sportRemove() {
  localStorage.removeItem("stSport");
  var vstSportsValue = localStorage.getItem("stSport");
  sportFunnel();
};

1 Ответ

0 голосов
/ 08 мая 2020

Добро пожаловать в SO.

Я создал простую скрипку, используя ваш пример: https://jsfiddle.net/Dganenco/vxja4kb1/ Когда я попытался запустить ваш код, я получил сообщение об ошибке в консоли который говорит: Uncaught ReferenceError: футбол не определен

Исправить вашу проблему очень просто - добавьте кавычки! 

<button onclick="sportExecute('soccer')" class="sportsModal-sport">Soccer</button>
      <button onclick="sportExecute('futsal')" class="sportsModal-sport">Futsal</button>
      <button onclick="sportExecute('basketball')" class="sportsModal-sport">Basketball</button>
...