Как кнопки могут быть нацелены, используя идентификатор вместо индекса? - PullRequest
Новая
       25

Как кнопки могут быть нацелены, используя идентификатор вместо индекса?

0 голосов
/ 04 апреля 2020

Я просто хочу изменить цвет фона кнопок, используя идентификатор вместо индекса из-за целей обслуживания. Любое предложение, как это можно сделать?

Запустите код из jsfiddle: https://jsfiddle.net/p6kuf0zv/4/

или посмотрите код в фрагменте кода: 

// On click on a button, a popover menu will show up
      $("[data-toggle=popover]").popover({
        html: true,
        sanitize: false,
        trigger: 'focus',
        content: function() {
          return $('#popover-content').html();
        }
      });
      // Creates data items inside local storage with keyName and keyValue
      var saveColorPref = (keyName, keyValue) => {
        localStorage.setItem(keyName, keyValue);
        return keyValue;
      }
      // Retrieves data items from local storage
      var getColorPref = (keyName) => {
        return localStorage.getItem(keyName);
      }
      // How can the code bellow be changed to make use of ID instead of index?
      var targetBtn;
      function setColor(keyValue) {
        var keyName = $(targetBtn).index();
        console.log(keyName, keyValue);
        $(targetBtn).css("background", saveColorPref(keyName, keyValue));
      }
      $('.myBtn').each((keyName, item) => {
        $(item).click((e) => {
          targetBtn = e.target;
        });
      });
.demo1{
        background-color: red;
      }
      .demo2{
        background-color: green;
      }
      .demo3{
        background-color: blue;
      }
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

  <body>
    <button class="myBtn" id="1" data-toggle="popover" data-placement="bottom" data-html="true">1</button>
    <button class="myBtn" id="2" data-toggle="popover" data-placement="bottom" data-html="true">2</button>
    <div id="popover-content" class="hide">
      <button class="demo1" onClick="setColor('red')">Red</button>
      <button class="demo2" onClick="setColor('green')">Green</button>
      <button class="demo3" onClick="setColor('blue')">Blue</button>
      <span class="close">&times;</span>
    </div>
   </body>

1 Ответ

0 голосов
/ 04 апреля 2020

В ответ на:

Как можно настроить таргетинг на кнопки, используя идентификатор вместо индекса?

Изменить setColor функция, как показано ниже:

До: 

function setColor(keyValue) {
  var keyName = $(targetBtn).index();
  console.log(keyName, keyValue);
  $(targetBtn).css("background", saveColorPref(keyName, keyValue));
}

После: 

function setColor(keyValue) {
  var keyName = $(targetBtn).attr('id');
  console.log(keyName, keyValue);
  $(targetBtn).css("background", saveColorPref(keyName, keyValue));
}

Фрагмент SO выдает эту ошибку: 

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

То есть вы не видите изменения цвета кнопки. Это работает в вашем jsfiddle.

...