4

Есть следующая ситуация:

На странице ряд кнопок с выезжающим текстом данной структуры:

div1.current_color_class_div > div2 > div3 > button

Задача, чтобы при клике на кнопку button div1 менял цвет(то есть, весь блок целиком).

Т.к. js почти не знаю - не могу придумать адекватного решения. На данный момент использую такой jquery скрипт:

$(document).ready(function(){
 $('.current_color_class_div').click(function () {
   $(this).toggleClass('add_target_color_class');
   });
 });

Но фокусируюсь на div1, который не является кнопкой. То есть цвет может меняться без срабатывания кнопки, что безусловно баг.

Есть ли возможность сфокусироваться из кнопки на родителя? Чистый js или jQuery - значения не имеет.

0

1 ответ 1

1

клик надо добавить кнопке, а внутри искать ближайшего родителя по имени класса

 $("button").click(function(){
      $(this).closest('current_color_class_div').toggleClass('...');
 });

селектор $("button") тут возможно слишком общий будет, так что либо кнопкам добавить какой-то общий класс, либо сделать селектор .current_color_class_div button

5
  • Это в том случаи если current_color_class_div по любому находится выше по иерархии дом (будь он в соседнем элементе или в любом другом месте дом "кроме родительской иерархии" и ...)
    – noname2019
    28 ноя 2019 в 7:49
  • @noname2019 конкретная структура приведена автором в вопросе
    – teran
    28 ноя 2019 в 7:50
  • Вопросов нет. Извините за камень в огород))
    – noname2019
    28 ноя 2019 в 7:51
  • @teran, большое спасибо! Данный скрипт решает описанную проблему
    – Lumxi
    28 ноя 2019 в 7:58
  • @ptpwork ткните галку ответу тогда
    – teran
    28 ноя 2019 в 8:00

Ваш ответ

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

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