Нажатие и выталкивание значений для каждого нажатия кнопки - PullRequest
Новая
       45

Нажатие и выталкивание значений для каждого нажатия кнопки

0 голосов
/ 25 апреля 2018

При каждом нажатии кнопки значение должно быть помещено в массив и показано в div.При повторном нажатии он должен быть извлечен из массива и также удален из div.

Я переключаю логическое значение для этого, но извлеченные значения не удаляются из div, когда Boolean равен false, возможно, что-то я делаю неправильно.Проект можно редактировать здесь 

$( "#button-list button" ).each(function(index) {
var items = [];
var toggle = false;
    $(this).on("click", function(){
    toggle = !toggle;
    if(toggle === true)
    items.push(this.value);
    else
    items.pop(this.value);
    
      $("#results").append(items);      
 });
});
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-list">
<button class="w3-button w3-black" value="(1,1)">(1,1)</button>
<button class="w3-button w3-black" value="(2,2)">(2,2)</button>
<button class="w3-button w3-black" value="(3,4)">(3,4)</button>
<button class="w3-button w3-black" value="(5,2)">(5,2)</button>
<button class="w3-button w3-black" value="(3,1)">(3,1)</button>
</div>
<p id="results"></p>

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018 

var items = [];

$("#button-list button").on('click', function(e){
  var indexOfElement = items.indexOf(e.target.value);
  //value is not in the array
  if (indexOfElement < 0) {
    items.push(e.target.value);
  } else {
    //value is in the array, remove it
    items.splice(indexOfElement, 1);
  }
  
  $('#results').text(items);
});
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-list">
  <button class="w3-button w3-black" value="(1,1)">(1,1)</button>
  <button class="w3-button w3-black" value="(2,2)">(2,2)</button>
  <button class="w3-button w3-black" value="(3,4)">(3,4)</button>
  <button class="w3-button w3-black" value="(5,2)">(5,2)</button>
  <button class="w3-button w3-black" value="(3,1)">(3,1)</button>
</div>
<p id="results"></p>
0 голосов
/ 25 апреля 2018

3 Небольшие изменения

  1. Объявление элементов вне функции each().Если нет, он сбрасывается для каждого слушателя
  2. Измените функцию append() на text().

При добавлении будут добавляться элементы при каждом щелчке.Вы хотите заменить элементы при каждом нажатии.

pop() удалит последний элемент из массива.Вам нужно использовать splice().Сращивание получает 2 значения.Сначала индекс, который вы хотите удалить, количество удаляемых элементов.

с помощью indexOf() мы можем получить индекс элемента в массиве. 

items.splice(items.indexOf(this.value), 1);

Надеюсь, что этопомогает:) 

var items = [];
$("#button-list button").each(function(index) {
  var toggle = false;
  $(this).on("click", function() {
    toggle = !toggle;
    if (toggle === true)
      items.push(this.value);
    else
      items.splice(items.indexOf(this.value), 1);

    //console.log(items);
    $("#results").text(items);
  });
});
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-list">
  <button class="w3-button w3-black" value="(1,1)">(1,1)</button>
  <button class="w3-button w3-black" value="(2,2)">(2,2)</button>
  <button class="w3-button w3-black" value="(3,4)">(3,4)</button>
  <button class="w3-button w3-black" value="(5,2)">(5,2)</button>
  <button class="w3-button w3-black" value="(3,1)">(3,1)</button>
</div>
<p id="results"></p>
...