Пытаетесь записать несколько нажатий кнопок (используя массив?) - PullRequest
Новая
       0

Пытаетесь записать несколько нажатий кнопок (используя массив?)

0 голосов
/ 18 июня 2020

Я пытаюсь записать, какие кнопки выбраны в меню. Контекст: я использую функцию карты, потому что количество и цвета кнопок определяются элементами в myList и myColors. Однако в других случаях myList и myColors будут иметь разные элементы.

Пользователи могут нажимать столько кнопок, сколько захотят, и когда они нажимают "Готово", они переходят к новой пробной версии. На данный момент у меня нет возможности записать, какие кнопки выбраны (когда выбрано несколько кнопок).

В настоящее время вы можете увидеть два закомментированных раздела, где я пытался сделать это, но ни один из них не работает. Я думаю, что хорошим решением было бы перечислить выбранные кнопки в массиве, когда пользователь нажимает кнопку «Готово». Такой вывод был бы идеальным (например, list = [A, B, 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>

  <body>
    <div id="buttonGallery">
      <!-- add this line -->
      <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"];

      $buttonGallery.children(":not(#done)").remove();

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

            // var id = $('.buttons.selected:eq(0)').attr('id');
            // var short_id = id.split("_")[1];
            // var list = [];
            // list.push(short_id);
            // console.log(list);

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


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

      function clearColor() {
        // var id = $('.buttons.selected:eq(0)').attr('id');
        // var short_id = id.split("_")[1];
        // var list = [];
        // list.push(short_id);
        // console.log(list);

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

</html>

1 Ответ

0 голосов
/ 18 июня 2020

Использование JavaScript

ПРИМЕЧАНИЕ: Я не использовал ваш код в моем примере, но как это могло выполняется с помощью al oop на элементах кнопок, записывая события щелчка в l oop и помещая эти значения в массив.

Вы можете запросить селекторы кнопок, я использую class и querySelectorAll в моем примере. Затем создайте массив для хранения значений нажатых кнопок. Выполните для l oop длину списка элементов кнопок. Используйте прослушиватель событий на каждой итерации, и если он запускается щелчком, запишите это в свой массив, используя pu sh.

Я решил использовать массив со значениями цвета для каждой кнопки в моем примере, и когда я создал отображение кнопок, я поместил значение цвета в текстовое содержимое и использовал его для получения значения цвета, выбранного при нажатии кнопки пользователем.

Используйте включает, чтобы увидеть, выбрал ли пользователь этот цвет, поэтому array.push() записывает его только один раз.

Необязательно: очистите массив clicked после того, как вы что-то сделаете с массивом, по которому щелкнули мышью, установив для него значение = []. 

let buttonsArr = [
  'red',
  'green',
  'blue',
  'yellow',
  'orange'
];
let display = document.getElementById('display');
let done = document.getElementById('done');
for (let i in buttonsArr) {
  display.innerHTML += "<button class='buttons' id='" + buttonsArr[i] + "'>" + buttonsArr[i] + "</button>";
}
let clicked;
let buttons = document.querySelectorAll('.buttons');
for (let n = 0; n < buttons.length; n++) {
  clicked = [];
  buttons[n].addEventListener('click', () => {
    if (!clicked.includes(buttons[n].textContent)) {
      clicked.push(buttons[n].textContent);
    }
    console.log(clicked); //--> `clicked` now holds the values of each color the user clicked on

  })

}
done.addEventListener('click', () => {
  document.getElementById('colors').textContent = clicked;

  //optional empty the array once you do something with it. 
  clicked = [];
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display"></div><p id="colors"></p>
<input type="button" value="Done" id="done">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...