如何使用 id 而不是索引来定位按钮？

Question

出于维护目的，我只是想使用 ID 而不是索引更改按钮的背景颜色。任何建议如何做到这一点？

运行来自 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>

Answer 1

回应：

How can buttons be targeted using id instead of index?

改变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 中有效。

如何使用 id 而不是索引来定位按钮？

How can buttons be targeted using id instead of index?

javascript

jquery

html

bootstrap-4

popover