单击时将多个变量记录到数组中答案

【问题标题】：Record multiple variables into array upon clicks单击时将多个变量记录到数组中
【发布时间】：2020-06-27 06:37:45
【问题描述】：

我有一个按钮菜单，正在尝试记录选择了哪些按钮。可以同时选择多个按钮。目前，我只能将单个按钮选择记录到单个数组中，但我正在尝试循环选择哪些按钮以将所有变量放入一个数组中。

如果选择了这些按钮，我希望得到这样的数组：["A", "C", "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>
    <div id="buttonGallery">
      <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"];

      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');

            let clicked = [];
            let syms = document.querySelectorAll('.selected');
            console.log(syms);

            for (let n = 0; n < syms.length; n++) {
              clicked = [];

              if (!clicked.includes(syms[n].textContent)) {
                clicked.push(syms[n].textContent);
                console.log(syms[n].textContent);
              }
              console.log('click', clicked);
            };

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

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

      function clearColor() {

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

【问题讨论】：

全局声明 let clicked = []; 并查看当前您在点击事件中声明它，这就是它不起作用的原因
@Swati，感谢您的评论 — 如果我单击 3 个按钮，例如 ["A"]、["A"、"C"，我尝试了您的建议以全局声明并获取 3 个数组] 和 ["A"、"C"、"D"]。你能解释一下为什么它输出三个数组而不是最后一个吗？

标签： javascript html jquery arrays

【解决方案1】：

您应该按照 cmets 中的建议在全局范围内设置 clicked，并且可以使用扩展运算符对您的数组进行重复数据删除：

let $buttonGallery = $("#buttonGallery");
let myList = ["A", "B", "C", "D"];
let myColors = ["red", "green", "blue", "red"];
let clicked = [];

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');

      let syms = document.querySelectorAll('.selected');
      let selected = [...syms].map(el => el.textContent)
      console.log("selected", selected);

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

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

function clearColor() {

  $(".buttons").css({
    backgroundColor: 'transparent'
  });
  $(".buttons").removeClass('selected');
}

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttonGallery">
  <div id="done">
    <p>done</p>
  </div>
</div>

【讨论】：