Обновить массив на основе выбора кнопки - PullRequest
Новая
       0

Обновить массив на основе выбора кнопки

1 голос
/ 09 июля 2020

У меня есть меню кнопок, и я пытаюсь записать, какие кнопки выбирает пользователь. Пользователь может выбрать несколько кнопок перед отправкой ответа, нажав кнопку «Готово». Они могут изменить свое мнение, отменив выбор, но их окончательный ответ должен быть отправлен после нажатия кнопки «Готово».

В настоящее время я могу записывать выбор нескольких кнопок, нажимая на массив при каждом нажатии. Однако, если пользователь отжимает кнопку, я не могу понять, как обновить свой массив. Например, если пользователь щелкает A, B, A. Выбор A будет отменен, но массив по-прежнему записывает ["A", "B"], тогда как вместо этого он должен записывать ["B"]. Есть ли у кого-нибудь то, что я делаю неправильно?

Мне неясно, записывается ли выбор на основе щелчков или кнопок имеет класс 'selected' из (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>

Ответы [ 2 ]

1 голос
/ 09 июля 2020

Проблема, похоже, в логике onClick c, вы помещаете только sh данные в массив, но не удаляете их. 

<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>
0 голосов
/ 09 июля 2020

Вы можете сделать это: 

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

, потому что вы объявляете в неправильной области. С глобальной переменной достаточно

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...