Переключение идентификаторов флажков в localStorage в PhoneGap - PullRequest
Новая
       16

Переключение идентификаторов флажков в localStorage в PhoneGap

0 голосов
/ 17 мая 2018

Таким образом, я столкнулся с проблемой при попытке сохранить идентификаторы серии флажков в localStorage, так как они соответствуют их установленному или непроверенному состоянию. Но теперь, когда я перезагружаю страницу, нет никаких признаков того, что изменения были сделаны.

  • По сути, я начинаю с предположения, что все флажки будут проверено.
  • Если флажок установлен, то его идентификатор должен входить в массив, который я позже сохраню в localStorage в виде строки.
  • Если флажок снят, его идентификатор должен появиться из массив, который я позже сохраню в localStorage в виде строки.

Вот мой код. Я заключил в скобки источник моей трудности с двумя звездочками (**). 

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>PollyGot</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>

  <script>
    // Wait for PhoneGap to load.
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready.
    function onDeviceReady() {
      // Get myL1s if it exists in localStorage.
      if (window.localStorage.getItem("myL1s") === null) {
        window.localStorage.setItem("myL1s", "en,de,fr,es,pt,ru,hi,ar,zh-CN,zh-TW,ja");
      }

      // Set checklist checked values based on allLs being in myL1s.
      for (x = 0; x < allLs.length; x++) {
        if (jQuery.inArray(allLs[x], myL1s)) {
          document.getElementById(allLs[x]).setAttribute("checked", true);
        }
        else {
          document.getElementById(allLs[x]).setAttribute("checked", false);
        }
      }
    }
  </script>

</head>

<body>
  <!-- Language Settings -->
  <div class="jumbotron">
    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="en" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="en">I speak English.</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="de" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="de">Ich spreche Deutsch.</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="fr" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="fr">Je parle français.</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="es" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="es">Yo hablo español.</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="pt" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="pt">Eu falo português.</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="ru" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="ru">Я говорю по-русски.</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="hi" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="hi">मैं हिंदी बोलते हैं।</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="ar" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="ar">أنا أتحدث العربية.</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="zh-CN" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="zh-CN">我说中文。</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="zh-TW" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="zh-TW">我說中文。</label>
      </div>
      <br>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="ja" onclick="togglyMyL1s(this)">
        <label class="custom-control-label" for="ja">私は日本語を話します。</label>
      </div>
    </div>
    <!-- Save and Return Button -->
    <button type="button" class="btn btn-success" id="snrBtn">Save and Return</button>
  </div>
  **<script>
    // Set a base myL1s string.
    var allLs = ["en", "de", "fr", "es", "pt", "ru", "hi", "ar", "zh-CN", "zh-TW", "ja"];
    var myL1s = window.localStorage.getItem("myL1s").split(",");

    // Set checkbox listeners to check for unchecked and checked checkboxes.
    // Remove the checkbox id's from myL1s when unchecked. Add them when checked.
    function togglyMyL1s(checkbox_elmnt) {
      if (checkbox_elmnt.hasAttribute("checked", false)) {
        window.localStorage.setItem("myL1s", myL1s.pop(checkbox_elmnt.id).join(","));
      }
      else {
        window.localStorage.setItem("myL1s", myL1s.push(checkbox_elmnt.id).join(","));
      }
      var myL1s = window.localStorage.getItem("myL1s");
    }
  </script>**

</body>

</html>

1 Ответ

0 голосов
/ 18 мая 2018

Основная проблема, с которой вы сталкиваетесь, заключается в том, что свойство hasAttribute() проверяет значение атрибута в том виде, в каком оно написано в HTML.Чтобы проверить текущее значение, вам нужно использовать свойство checked.

Измените это: 

if (checkbox_elmnt.hasAttribute("checked", false))

на следующее: 

if (checkbox_elmnt.checked)

и ваш код будетработать как положено.Хотя я бы написал немного по-другому для большей эффективности, но ваш код будет работать с исправлением, описанным выше.

...