Добавить обработчик кликов к родителю элемента с помощью «заголовок начинается с» - PullRequest
Новая
       19

Добавить обработчик кликов к родителю элемента с помощью «заголовок начинается с»

2 голосов
/ 22 марта 2019

Я хочу добавить обработчик, который изменит фон некоторых элементов с классом controlButtonInline при нажатии прадеда элемента с title, который начинается с Name.

Пока у меня есть это, но событие никогда не проходит. Я не думаю, что ABC заполняется идентификатором, который может распознать второй jQuery. 

var ABC = $('select[title^="Name"]')

$(ABC).parent().parent().parent().click(function() {
  $('.controlButtonInline').css({
    'background': 'black'
  });
});

Любая помощь с благодарностью получена!

------ EDIT 1 ------

Я до сих пор не могу заставить это работать, вот дополнительная информация, если кто-то не против посмотреть. Я хочу включить обработчик кликов, нажав на верхнюю часть DIV (я написал id = "unstableID", потому что в используемой программе этот идентификатор будет постоянно меняться), но мне нужно идентифицировать этот элемент из заголовка потомок DIV. 

var ABC = $('select[title^="Name"]')

ABC.parent().parent().parent().click(function() {
  $('.controlButtonInline').css({
    'background': 'black'
  });
});
controlButtonInline {
  width: 10px;
  height: 10px;
  background: red
}
<DIV id="unstableID">
  <DIV>
    <DIV>
      <DIV title="Name is BI">
      </DIV>
    </DIV>
  </DIV>
</DIV>

<DIV class="controlButtonInline">Text
</DIV>

Ответы [ 2 ]

0 голосов
/ 22 марта 2019

Проблема в том, что элемент с атрибутом title является div, а не select. Исправьте селектор jQuery, и код работает.

При этом лучше использовать addClass() вместо css(), так как он не помещает логику CSS в файл JS. Также обратите внимание, что вам следует избегать использования цепных вызовов parent(), где это возможно. closest() намного лучшая практика: 

var $ABC = $('div[title^="Name"]')

$ABC.closest('.great-grandparent').click(function() {
  $('.controlButtonInline').addClass('foo');
});
.controlButtonInline {
  width: 10px;
  height: 10px;
  background-color: red
}

.controlButtonInline.foo {
  background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="unstableID" class="great-grandparent">
  <div>
    <div>
      <div title="Name is BI">Click me</div>
    </div>
  </div>
</div>
<div class="controlButtonInline">Text</div>
0 голосов
/ 22 марта 2019 
var ABC = $('select[title^="Name"]')

ABC.closest('.great-grandparent').click(function(){
  $('.controlButtonInline').css({
        'background': 'black'
    });
});

или 

var ABC = $('select[title^="Name"]')

ABC.parents('.great-grandparent').click(function(){
      $('.controlButtonInline').css({
            'background': 'black'
        });
});
...