Как обработать несколько элементов на Jquery?

281

09 марта 2017, 23:04

Есть такой код:

$('#block').change(function(){
    var data = $('#block').data('prop');
    FuncName(data);
});

С одним блоком всё работает, но на странице нужно сделать много таких элементов (свойство prop будет у всех разное). Как правильно сделать обработчик в этом случае, чтобы понять какой их них переключили? Ведь id у всех блоков должен быть разный.

Answer 1

Можно искать множество элементов так: #id1, .class1 > div, a[data-id~="42"].
А внутри обработчика работать с this:

// Создаём строку вида "#block1, #block2" и т. д. 
let idPool = Array(...Array(4)).map((_, i) => '#block' + ++i).toString(); 
// Обработчик, аргумент - элемент в жуквери-обёртке 
const handler = e => console.info(`data-id: ${e.data('id')}, value: ${e.text()}`); 
 
$(idPool).on('click', function(){ 
  // this - DOM-элемент, оборачиваем его в жуквери (если нужно, конечно) 
  handler($(this)); 
});

div[data-id]{ 
  padding: 5px; 
  background: lightgreen; 
  margin: 5px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id='block1' data-id='42'>1</div> 
<div id='block2' data-id='24'>2</div> 
<div id='block3' data-id='22'>3</div> 
<div id='block4' data-id='44'>4</div>

Хотя, конечно, правильнее множество однотипных объектов объединять классом.

Answer 2

Меняем id, на class. Радуемся.

$('.block').change(function(){
    var data = $(this).data('prop');
    FuncName(data);
});

$(this) внутри обработчика указывает конкретно на тот самый объект, на котором произошло событие на данный момент.

$('.block').on('keyup', function(){     
    var data = $(this).data('prop'); 
    FuncName(data); 
}); 
 
function FuncName(data) { 
  console.log('my data prop = ' + data);   
}

.block { 
  border: 1px solid black; 
  margin: 10px; 
  padding: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" data-prop="1" class="block" value="1"> 
<input type="text" data-prop="2" class="block" value="2"> 
<input type="text" data-prop="3" class="block" value="3">

$('.block').change(function() { 
    var data = $(this).data('prop'); 
    FuncName(data); 
}); 
 
function FuncName(data) { 
  console.log(data); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="radio" name="myradio" data-prop="allot" value="allot"  checked="checked" class="block">Allot 
<input type="radio" name="myradio" data-prop="transfer" value="transfer" class="block">Transfer

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как поставить в очередь?

Описание работы слайдера: слайдер меняет по 5 фотографий при клике, и записывает 5 фотографий в буфер, чтобы при следующем клике заменяет предыдущие...

238

CSS