尝试记录多个按钮选择（使用数组？）答案

【问题标题】：Trying to record multiple button selections (using an array?)尝试记录多个按钮选择（使用数组？）
【发布时间】：2020-10-08 01:58:30
【问题描述】：

我正在尝试记录在菜单中选择了哪些按钮。上下文：我使用 map 函数是因为按钮的数量和颜色由 myList 和 myColors 中的元素决定。但是，在其他情况下，myList 和 myColors 中会有不同的元素。

用户可以点击任意数量的按钮，当他们点击完成后，他们会进入新的试用期。此刻，我没有办法录制选择哪个按钮（当有多个选定时）。

目前，您可以看到两个已注释掉的部分，我试图在其中执行此操作，但均无效。我认为一个好的解决方案是在用户单击“完成”时在数组中列出选定的按钮。这样的输出将是理想的（例如，list = [A, B, D] 或用户选择的任何按钮），但我还不能做到这一点。任何帮助将不胜感激！

提前非常感谢！

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    #done {
      width: 150px;
      height: 50px;
      border: solid 2px black;
      text-align: center;
      color: black;
      cursor: pointer;
      background-color: white;
      margin: 2px;
    }
  </style>
</head>

<body>

  <body>
    <div id="buttonGallery">
      <!-- add this line -->
      <div id="done">
        <p>done</p>
      </div>
    </div>
    <script type="text/javascript">
      let $buttonGallery = $("#buttonGallery");
      let myList = ["A", "B", "C", "D"];
      let myColors = ["red", "green", "blue", "red"];

      $buttonGallery.children(":not(#done)").remove();

      myList.map(function(letter, index) {
        let $button = $("<div></div>")
          .addClass("buttons")
          .attr("id", "button_" + letter)
          .html("<p>" + letter + "</p>")
          .on("mouseenter", function() {
            $(this).css("background", myColors[index]);
          })
          .on("mouseleave", function() {
            if (!$(this).hasClass('selected')) {
              $(this).css("background", "transparent");
            }
          })
          .on("click", function() {
            $(this).css("background", myColors[index]);
            $(this).addClass('selected');

            // var id = $('.buttons.selected:eq(0)').attr('id');
            // var short_id = id.split("_")[1];
            // var list = [];
            // list.push(short_id);
            // console.log(list);

          })
        $("#done").before($button);
      });


      $("#done").on("click", clearColor);

      function clearColor() {
        // var id = $('.buttons.selected:eq(0)').attr('id');
        // var short_id = id.split("_")[1];
        // var list = [];
        // list.push(short_id);
        // console.log(list);

        $(".buttons").css({
          backgroundColor: 'transparent'
        });
        $(".buttons").removeClass('selected');
      }
    </script>
  </body>
  </script>
</body>

</html>

【问题讨论】：

标签： javascript html jquery css arrays

【解决方案1】：

使用 JavaScript

注意： 我没有在我的示例中使用您的代码，只是如何在您的按钮元素上使用循环来记录点击事件在循环中并将这些值推送到数组中。

您可以查询按钮的选择器，我在示例中使用class 和querySelectorAll。然后创建一个数组来保存单击按钮的值。在按钮元素列表的长度上运行 for 循环。在每次迭代中使用事件侦听器，如果它是通过单击触发的，请使用 push 将其记录在您的数组中。

在我的示例中，我选择使用包含每个按钮的颜色值的数组，当我创建按钮的显示时，我将颜色值放入文本内容中并使用它来获取颜色值当用户单击按钮时选择。

使用包含查看用户是否已经选择了该颜色，因此array.push() 只记录一次。

（可选）一旦您通过将数组设置为= [] 对单击的数组进行操作，清空clicked 数组。

let buttonsArr = [
  'red',
  'green',
  'blue',
  'yellow',
  'orange'
];
let display = document.getElementById('display');
let done = document.getElementById('done');
for (let i in buttonsArr) {
  display.innerHTML += "<button class='buttons' id='" + buttonsArr[i] + "'>" + buttonsArr[i] + "</button>";
}
let clicked;
let buttons = document.querySelectorAll('.buttons');
for (let n = 0; n < buttons.length; n++) {
  clicked = [];
  buttons[n].addEventListener('click', () => {
    if (!clicked.includes(buttons[n].textContent)) {
      clicked.push(buttons[n].textContent);
    }
    console.log(clicked); //--> `clicked` now holds the values of each color the user clicked on

  })

}
done.addEventListener('click', () => {
  document.getElementById('colors').textContent = clicked;

  //optional empty the array once you do something with it. 
  clicked = [];
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display"></div><p id="colors"></p>
<input type="button" value="Done" id="done">

【讨论】：