получить блоки внутри родителя через this

Question

Чтобы получить кнопки prew next внутри каждого wrap, я сделал так, прошелся в цикле по всем wrap, и навесил клик. Что бы таким образом через this, получить кнопки которые находятся внутри wrap.

Подскажите правильно ли так делать, и если можно сделать как то иначе, то как.

Answer 1

Зачем так сложно? А если у вас таких элементов миллион? Браузер же не выдержит. Вешайте один обработчик на общий родитель и все

<html>

<body>

<style>

.wraps {
    width:      100px;
    height:     200px;
    background: red;
}

.wrap {
    margin:     20px;
    background: lime;
}

.wrap div {
    width:      50px;
    height:     25px;
    margin:     10px;
    background: orange;
}

</style>

<div class = 'wraps'>
    <div class = 'wrap obj1'>
        <div class = 'prev'>Prev</div>
        <div class = 'next'>Next</div>
    </div>
    <div class = 'wrap obj2'>
        <div class = 'prev'>Prev</div>
        <div class = 'next'>Next</div>
    </div>
</div>

<script>

let wraps_obj = document.querySelector('.wraps');

wraps_obj.onclick = function(e) {
    if (e.target.className.includes('prev'))
        console.log('Prev button');
        
    if (e.target.className.includes('next'))
        console.log('Next button');     
}

</script>
    
</body>

</html>

В итоге код будет занимать всего несколько строчек, но будет понятным и без лишних телодвижений. Кроме того он легко будет переваривать и огромное кол-во отслеживаемых элементов, ведь обработчик только один

Т.е. алгоритм такой:

на общий родитель вешается обработчик
когда пользователь нажимает на любой элемент внутри родителя, то в функцию обработчика передаётся структура, содержащая в том числе и цель (на что нажал пользователь) e.target
определяем какие классы у нажатой цели e.target.className
и если классы содержат отслеживаемый нами класс e.target.className.includes(отслеживаемый класс), то выполняем требуемые действия

конечно, чтобы это работало надо, чтобы отслеживаемый класс находится только у нужных элементов, но это уже легко реализуется

БЛОГ НА HUSL

получить блоки внутри родителя через this

Ответы (1 шт):