Целевой элемент one element с тем же классом

#javascript

Вопрос:

У меня есть что-то вроде этого. Я хочу иметь возможность настраивать таргетинг на один элемент из нескольких элементов с тем же классом.

Может кто-нибудь, пожалуйста, помогите мне.

 <div data-id = '1' class = "anchor anchor1">
    <div class="inner">
        <div class="label">
            Button 1
        </div>
    </div>
</div>
<div data-id = '2' class = "anchor anchor2">
    <div class="inner">
        <div class="label">
            Button 2
        </div>
    </div>
</div>
<div data-id = '3' class = "anchor anchor3">
    <div class="inner">
        <div class="label">
            Button 3
        </div>
    </div>
</div>


$(".anchor .label").each(function(){
    $(this).hover(function(){
        var anchorId = $(this).parent().parent().data('id');
        //Do stuff 
        console.log(anchorId);
    });
});

1. какой элемент вы хотите найти?

2. Извините, было не очень понятно … поэтому, когда я, например, наведу курсор на кнопку 2, я хочу добавить класс «active» к элементу anchor2.

3. Ваш код работает — консоль. в журнале отображается идентификатор элемента, на который наведен указатель мыши. Что вы хотите, чтобы он делал, чего он сейчас НЕ делает?

4. И под «элементом anchor2» вы подразумеваете div с классом anchor2?

5. Да, это правильно, mrrrow

Ответ №1:

Основываясь на ваших ответах в комментариях, вы можете сделать это, чтобы добавить класс «active» в родительский div с классом привязки, когда наведен указатель мыши на div с классом label:

 $(".label").each(function() {
    $(this).hover(function() {
        //let anchorId = $(this).parent().parent().data('id');
        $(this).parent().parent().addClass('active');
    });
});

В ответ на вопрос OP о том, как удалить «активный» класс из других div с привязкой, добавьте это непосредственно перед или после строки $(this).parent().parent().addClass('active'); :

     $(this).parent().parent().siblings().removeClass('active');

Предупреждение: весь этот ответ основан на том, что структура HTML остается неизменной, то есть отдельные элементы привязки / метки будут по-прежнему структурированы следующим образом:

 <div class="anchor">
    <div>
        <div class="label">
            Button
        </div>
    </div>
</div>

Если эта структура DOM когда-либо изменится так, что привязанные divs не будут parent().parent() для divs меток (например, если вы избавились от div между ними), вам нужно будет обновить код, или вам нужно будет подойти к нему по-другому, чтобы не зависеть отСтруктура DOM.

1. О, так просто! что, если я хочу удалить «active» из его родных братьев и иметь его только в элементе наведения?

2. Для этого вы можете использовать .siblings и .removeClass() . Я отредактирую свой ответ, чтобы включить его.

Ответ №2:

Попробуйте присвоить целевому элементу идентификатор, подобный этому.

 <html>
<style>
.box{
  /* stuff to apply to all of them*/
}
#target{
 /* stuff that applies to just the target */
}
</style>
<body>
<div class="box"></div>
<div class="box" id="target"></div>
<body>
</html>

Ответ №3:

Спасибо, mrrrow, это работает

 $(".label").each(function() {
   $(this).hover(function() {
      $(this).parent().parent().addClass('active').siblings().removeClass('active');
   });
});