选择按钮后记录更新的数组（javascript）答案

【问题标题】：Record updated array after button selections (javascript)选择按钮后记录更新的数组（javascript）
【发布时间】：2020-10-29 12:35:31
【问题描述】：

在此按钮菜单中，用户可以选择多个按钮并通过单击完成按钮提交最终答案。他们可以通过取消选择按钮来更改答案，但同样，他们的最终答案应在单击完成按钮时提交。

目前，我能够在单击时记录每个按钮选择并沿途更新数组。但是，我想只记录最终答案。虽然在这个玩具示例中我是在本地录制到控制台，但我是在我的真实代码中将数据发送到服务器。

我已经注释掉了每次点击时我会在哪里打印 - 只是为了解释清楚而将其留在那里。我再次希望仅在用户单击完成按钮时打印最终答案。我想我遇到了一个范围问题，因为“点击”数组在地图函数之外不存在。但我不知道如何解决这个问题。有人有解决办法吗？

提前感谢大家！（如果有任何不清楚的地方，也可以接受编辑建议！）

<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"];
    let clicked = [];

    myList.map(function(letter, index) {
      let clicked = [];
      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).toggleClass('selected');
          clicked = [];

          // push clicked variables to array
          let syms = document.querySelectorAll('.selected');

          for (let n = 0; n < syms.length; n++) {
            if (!clicked.includes(syms[n].textContent)) {
              clicked.push(syms[n].textContent);
            }
          };

          // send data to server
          // console.log('clicked array', clicked);
        })
      $("#done").before($button);
    });

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

    function clearColor() {
      console.log('clicked array', clicked);

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

      // reset clicked list after recording button selections
      clicked = [];
    }
  </script>
</body>
</script>

</html>

【问题讨论】：

标签： javascript html jquery css arrays

【解决方案1】：

您在地图中有let clicked = []，因此它变成了clicked 数组，用于将点击的值添加到其中。您添加到该“内部”clicked 数组，但您的 clearColor() 函数正在查看保持为空的“外部”clicked 数组。您只需要删除map() 中的let clicked = []; 行

<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"];
    let clicked = [];

    myList.map(function(letter, index) {
      //let clicked = []; <-- don't re-declare it here
      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).toggleClass('selected');
          clicked = [];

          // push clicked variables to array
          let syms = document.querySelectorAll('.selected');

          for (let n = 0; n < syms.length; n++) {
            if (!clicked.includes(syms[n].textContent)) {
              clicked.push(syms[n].textContent);
            }
          };

          // send data to server
          // console.log('clicked array', clicked);
        })
      $("#done").before($button);
    });

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

    function clearColor() {
      console.log('clicked array', clicked);

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

      // reset clicked list after recording button selections
      clicked = [];
    }
  </script>
</body>
</script>

</html>

【讨论】：