3

Добры день есть такая задачка, с такой разметкой

<div class='wrapper'>
<div class='item'>
<div class='item'>
<div class='item active'>
<div class='item'>
</div>

При свайпе другого элемента у item меняется класс( т.е повесить обработчик в другом месте не вариант) мне надо отслеживать изменение класса, и как только он изменился получать индекс нового элемента с классом active

Не думаю что такое вообще возможно но решил спросить все же:)

Dan
  • 2,191

3 Answers3

3

var item = document.getElementsByClassName('item');
for (let i = 0; i < item.length; i++) {
  item[i].addEventListener('click', function() {
    for (let i = 0; i < item.length; i++) {
      item[i].classList.remove('active');
    }
    item[i].classList.add('active');
    console.log('индекс элемента---', i);
  })

}
<div class='wrapper'>
  <div class='item'>item</div>
  <div class='item'>item</div>
  <div class='item active'>item</div>
  <div class='item'>item</div>
</div>
Air
  • 14,505
0

что-то вроде этого

function lookingForActive() {
    let items = document.body.querySelectorAll('.wrapper .item');

    items.forEach(function(value, i, arr) {
        if (value.classList.contains("active")) {
            retutn(i);
        }
});
}
muturgan
  • 1,246
0

Как вариант, повесить обработчики на все эти элементы, и проверять наличие класса. Если Вы используете jQuery:

$(document).on('click', 'div.item', function(){
    if ($(this).hasClass('active')) {/* then todo */};
});
KOTJlETA
  • 177