1

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

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

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

0

2 ответа 2

1

Меняем 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

0

Можно искать множество элементов так: #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>


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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.