クリック時に複数の変数を配列に記録する

debugcn 投稿 Dev

サイココーダー

ボタンのメニューがあり、どのボタンが選択されているかを記録しようとしています。複数のボタンを同時に選択できます。現在、個々のボタンの選択を個々の配列に記録することしかできませんが、すべての変数を1つの配列に配置するために、どのボタンが選択されているかをループしようとしています。

これらのボタンが選択されている場合は、["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>

SLePort

clickedコメントで提案されているようにグローバルに設定する必要があり、spread演算子を使用して配列を重複排除できます。

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]