根据按钮选择更新数组答案

【问题标题】：Update array based on button selections根据按钮选择更新数组
【发布时间】：2020-10-29 12:16:44
【问题描述】：

我有一个按钮菜单，正在尝试记录用户选择了哪些按钮。用户可以通过单击完成按钮在提交答案之前选择多个按钮。他们可以通过取消点击选择来改变主意，但他们的最终答案应该在点击完成按钮后提交。

目前，我可以通过在每次单击时推送到数组来记录多个按钮选择。但是，如果用户 unclicks 一个按钮，我无法弄清楚如何更新我的数组。例如，如果用户单击 A、B、A。它将取消选择 A，但数组仍然记录 ["A", "B"]，而应该记录 ["B"]。有人我做错了吗？

我不清楚选择是基于点击记录还是按钮从 (let syms = document.querySelectorAll('.selected') 中“选择”类。提前非常感谢！

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

          // 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() {

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

      // reset clicked list
      clicked = [];
    }
  </script>
</body>
</script>

</html>

【问题讨论】：

Inside button.on('click', function(){......}) 在“//将点击的变量推送到数组”之前添加一行clicked = [];并尝试...
@AlwaysaBeginner 效果很好！我很高兴它被证明是一个快速修复。谢谢！
很高兴知道它有帮助....但是，您知道您可以简化代码以从数组中添加或删除单击的按钮，对吗？您可以简单地添加或删除单击的按钮，而不是遍历所有具有选定类的项目并将它们添加到数组中。检查@CHANist的答案

标签： javascript html jquery css arrays

【解决方案1】：

问题似乎出在 onClick 逻辑中，您只是将数据推送到数组中，而没有删除任何内容。

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

          // push clicked variables to array
          var isSelected = $(this).hasClass('selected');
          var value = $(this).text(); 
          console.log('isSelected', isSelected);
          console.log('value', value); 
          if (isSelected) {
              clicked.push(value)
          }
          else {
              clicked = clicked.filter(item => {
                  return item !== value;
              });
          }

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

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

    function clearColor() {

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

      // reset clicked list
      clicked = [];
    }
  </script>
</body>
</script>

</html>

【讨论】：

【解决方案2】：

你可以这样做：

<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 $button = $("<div></div>")
        .addClass("buttons")
        .attr("id", "button_" + letter)
        .data({
          letter: 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');

          const selectedLetter = $(this).data().letter;
            if (!clicked.includes(selectedLetter)) {
              clicked.push(selectedLetter);
            } else {
              clicked = clicked.filter((item) => item != selectedLetter);
            }

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

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

    function clearColor() {

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

      // reset clicked list
      clicked = [];
    }
  </script>
</body>
</script>

</html>

使用.data() jQuery 函数，我为每个按钮设置了一个字母。然后，当我单击其中一个时，它们会显示一个不变的字母。所以你可以在数组中添加或删除那个字母

我删除了这个

let clicked = [];

因为您声明的范围不正确。有了全局变量就够了

【讨论】：