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

debugcn 发表于 Dev

心理编码器

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

我希望最终得到这样的数组：[“ 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>

港口

您应该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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。