Как при клике добавить переменную в массив, а при повторном клике ее удалить на JQUERY

137

24 августа 2019, 06:00

На сайте есть блок список товаров (в моем случае это мобильные номера) - номера в виде кнопок. Необходимо, чтобы посетитель сайта мог кликнуть на понравившейся номер (или несколько номеров) из списка (список 50 номеров), номер выделился цветом и добавился в форму сайта в строчку "выбранные номера". Если по номеру кликает повторно - этот номер удаляется.

Сейчас код такой (не могу понять как сделать, чтобы номер удалялся):

JQUERY:

$(document).ready(function() { 
	$(function() { 
		$('.btn_1').click(function() { 
	    $(this).toggleClass('click_number_green'); 
		}); 
	}); 
 
var items = []; 
$('.btn_1').on('click', function() { 
		var value = $(this).data('pos'); 
		if(items.indexOf(value)==-1){ 
			items.push(value); 
		} 
		$('#out').text(items); 
	}); 
});

<div id="btn"> 
<p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
<p><button class="btn_1" data-pos="925-645-85-73">925-645-85-73</button></p> 
<p><button class="btn_1" data-pos="925-111-35-67">925-111-35-67</button></p> 
<p><button class="btn_1" data-pos="925-722-12-34">925-722-12-34</button></p> 
<p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
<p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
<p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
<p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
 
</div>

Answer 1

На сонную голову пришёл такой вариант:

$('.number').on('click', function(){ 
  let numberArr = []; // создаём пустой массив 
  $(this).toggleClass('selected'); // вешаем класс 
  $('.number.selected').each(function(){ // проходим по всем элементам с классом 
    numberArr.push($(this).text()); // добавляем их текст в массив 
  }); 
  // Ниже лог, можно удалить 
  console.clear(); 
  console.info('Выбраные номера: '+numberArr); 
});

.number {display: inline-block; padding: 3px; margin-bottom: 3px; cursor: pointer;} 
.number:last-child {margin-bottom: 0;} 
.number:hover {background: #ddd;} 
.number.selected {background: blue; color: #fff;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="number">8-123-123-00-00</div> 
<div class="number">8-123-123-11-11</div> 
<div class="number">8-123-123-22-22</div> 
<div class="number">8-123-123-33-33</div> 
<div class="number">8-123-123-44-44</div> 
<div class="number">8-123-123-55-55</div> 
<div class="number">8-123-123-66-66</div> 
<div class="number">8-123-123-77-77</div> 
<div class="number">8-123-123-88-88</div> 
<div class="number">8-123-123-99-99</div>

Из плюсов: Сохраняется порядок номеров по DOM.
Из минусов: При большом кол-во элементов (что на странице, что в массиве) будет долго обрабатываться.

Answer 2

$(document).ready(function() { 
  $(function() { 
    $('.btn_1').click(function() { 
      $(this).toggleClass('click_number_green'); 
    }); 
  }); 
 
  var items = []; 
  $('.btn_1').on('click', function() { 
    var value = $(this).data('pos'); 
    (items.indexOf(value) == -1)? items.push(value) : items.splice(index, 1); 
    $('#out').text(items); 
  }); 
});

.click_number_green { 
  background: lightgreen; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="out"></div> 
<div id="btn"> 
  <p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
  <p><button class="btn_1" data-pos="925-645-85-73">925-645-85-73</button></p> 
  <p><button class="btn_1" data-pos="925-111-35-67">925-111-35-67</button></p> 
  <p><button class="btn_1" data-pos="925-722-12-34">925-722-12-34</button></p> 
  <p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
  <p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
  <p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
  <p><button class="btn_1" data-pos="925-764-85-63">925-764-85-63</button></p> 
 
</div>