Как отслеживать изменение класса

172

07 февраля 2018, 14:23

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

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

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

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

Answer 1

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>

Answer 2

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

function lookingForActive() {
    let items = document.body.querySelectorAll('.wrapper .item');
    items.forEach(function(value, i, arr) {
        if (value.classList.contains("active")) {
            retutn(i);
        }
});
}

Answer 3

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

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

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

Все вопросы

ТОП-10

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

Как правильно увеличивать на 100 css свойство элемента? [дубликат]

На данный вопрос уже ответили:

194

PHP

php call user func, для переменных

Есть простой класс:

188

PHP

PHP составление класса

Имею базовый класс вывода комментариев, и хотел бы узнать, валидный ли это код или нетВ кратком, перенесу его структуру

209

PHP

Как обновить информация в столбце в mysql?

Есть столбик xfields, в котором присутствует подобное содержание:

221