Нужна помощь по JS

[Endorphin]

Всем привет, нужна помощь в пролитии света на одну из тем в JS, называется она делегирование событий, Кантор на своем сайте приводит пример с табличкой и изменение цвета. Хорошо это я понял как у него работает и тему понял, НО! Когда я начинаю писать свой JS код, вещать обработчик на общего родителя, например есть вот такая разметка 

, и я хочу чтобы при по кнопке в любом из блоков мой wrapper-slider становился display:block; Не получаеться написать правильный JS для этого дела((( Ну или так же есть скрипт увеличения цены и количества товара, но мне пришлось на каждый блок вещать свой обработчик так как по другому к сожалению не могу додуматься как, теорию читал, но тех примеров оказалось мало для понимания( HELP ME!

[DivMan]

А знаешь, как сделать обработчик для каждого? Пока что без делегирования.

[Endorphin]

Да, для каждого сделать обработчик могу. 

[sigma77]

3 hours ago, Endorphin said:

Не получаеться написать правильный JS для этого дела(((

У тебя поле скрипт сейчас пустое. Покажи, что ты уже сделал.

[Endorphin]

Обновил код, посмотрите

[sigma77]

@Endorphin

Смотри.

1. var catBtn = document.querySelectorAll('button'); - ты получаешь массивоподобную коллекцию элементов. Т.е. все кнопки на странице.

2. if(target !== catBtn) - тут ты пытаешься сравнить эту коллекцию с одним единственным элементом, до которого дошло событие. И, естественно, они будут не равны.

Тебе нужно сравнивать полученный таргет с известными данными о твоей кнопке. Это может быть название элемент, ид, класс, какие-либо дата-аттрибуты.

Но двигаешься ты в правильном направлении

[Endorphin]

Так, понял, попробую обновить, исходя из вашей информации, а как я могу с помощью нажатия кнопки изменить стили или классы у элемента который именно в том блоке в котором произошло событие.

[sigma77]

7 minutes ago, Endorphin said:

а как я могу с помощью нажатия кнопки изменить стили или классы у элемента который именно в том блоке в котором произошло событие.

1. Получить элемент двигаясь по DOM относительно кнопки - http://learn.javascript.ru/traversing-dom

2. Изменить стиль путем добавления инлайн-стилей или класса, где будут прописаны эти стили.

[Endorphin]

Сделал сравнение по имени тега, все равно ноль эмоций, и с этими child вообще не понял, как написать функцию что бы он находил именно в этом блоке этот элемент, или в переменную прям положить второй элемент .catalog-item'а? Я не понимаю эту тему потому что ни одного примера не нашел именно с подобной структурой, разобранного простым языком(

Вот всё делаю вроде как в примере у Кантора, а не работает 

[sigma77]

Смотри, я добавила алерт с target.tagName, сравни, что он выводит и с каким значением ты сравниваешь. Не забывай проверять те свойства и переменные, которые ты используешь, особенно на начальном этапе, console.log() и alert() должны стать твоими лучшими друзьями :). Да, и строки всегда лучше приводить к одному регистру (toLowerCase() / toUpperCase()).

Далее, тебе нужно получить '.wrapper-slider'. Что ты имеешь? У тебя есть полученная кнопка - это var target = e.target; Т.е. это будет твой стартовый узел. От него ты можешь перейти к следующему сестринскому элементу (target.nextElementSibling) или получить общего родителя (parentNode), в данном случае .catalog-item, а потом внутри него уже найти нужный элемент в потомках (children).

 

 

[Endorphin]

Так а children мы можем найти только по номеру в псевдомассиве? Можно как то по классу children найти?

Я прям готов вас расцеловать наконец то я разобрался в этой теме и у меня получилось сделать, прям как Моисей раздвигал моря, вы мне раздвинули границы для моего дальнейшего обучения. За день научился получать элементы по таргету и через parent и children, спасибо вам ОГРОМНЕЙШЕЕ, никто не хотел нормально объяснить, на протяжении трех недель покоя мне это дело не давало. 

[sigma77]

7 minutes ago, Endorphin said:

Так а children мы можем найти только по номеру в псевдомассиве? Можно как то по классу children найти?

можно циклом прбежаться. Кстати и .querySelector/QuerySelectorAll тоже должны сработать, если применить их к родителю.

[Endorphin]

Ну по сути, я как разработчик знаю свое DOM дерево, и обратиться по номеру элемента в массиве тоже хорошо. 

[Endorphin]

Тема закрыта, проблема решена, знал что тут всегда отзывчивые ребята и девушки