Использование jQuery '.eq()' с несколькими классами

Question

Как правильно использовать функцию eq для нескольких классов? Поскольку div с классом «a» не является последующим, я не могу использовать функцию «eq» для обновления своего класса. Если divs с классом «b» удаляются, функция работает отлично. Вот скрипка https://jsfiddle.net/9w8zhg7d/4/. У меня есть следующий HTML:

<div class="a current"> 
</div> 
<div class="a"> 
</div> 
<div class="b"> 
</div> 
<div class="b"> 
</div> 
<div class="a"> 
</div> 
<div class="a"> 
</div> 

и следующий JavaScript:

Class = { 
    a: ".a", 
    highlighted: ".a.current", 
    init: function() { 
     $(this.a).click(this.toggleA.bind(this)); 
    }, 
    toggleA: function(e) { 
     e.preventDefault(); 
     $(this.highlighted).removeClass("current"); 
     var target = $(e.target); 
     var clickedA = target.closest(this.a); 
     var clickedIndex = clickedA.index(); 
     $(".a").eq(clickedIndex).addClass("current"); 
     console.log(clickedIndex); 
     $(".b").eq(clickedIndex).css("display", "inline-block"); 
    } 
}; 

Class.init(); 

Любая помощь очень ценится!

Answer 1

Если я правильно понимаю ваш вопрос, вы хотите знать, индекс конкретного .a элемента, которая была нажата, игнорируя все остальные элементы. В этом случае вы просто должны использовать .index() method правильно:

var clickedIndex = $(this.a).index(e.target); 

При вызове .index() без аргументов, как в вашем коде, он находит индекс первого элемента в JQuery объекта относительно его братьев и сестер, а не по отношению к другие элементы в объекте jQuery. Код, который я показал, говорит, чтобы сначала выбрать все элементы .a, а затем в этих элементах только определить положение элемента e.target.

Вы также слишком усложнили настройку класса current - не имеет смысла использовать .closest(), потому что это для навигации по DOM, и все ваши элементы - братья и сестры. Вы можете просто сказать:

$(e.target).addClass("current"); 

Я не понимаю, как вы хотите применить индекс щелкнули .a элемента к .b элементов, потому что есть четыре .a «ы и только два .b», но все еще положить, что я сказал выше, вместе с вашим кодом дает что-то вроде этого:

Class = { 
 
    a: ".a", 
 
    highlighted: ".a.current", 
 
    init: function() { 
 
    $(this.a).click(this.toggleA.bind(this)); 
 
    }, 
 
    toggleA: function(e) { 
 
    e.preventDefault(); 
 
    $(this.highlighted).removeClass("current"); 
 
    var target = $(e.target).addClass("current"); 
 
    var clickedIndex = $(this.a).index(e.target); 
 
    console.log(clickedIndex); 
 
    $(".b").removeClass("current").eq(clickedIndex).addClass("current"); 
 
    $(".c").removeClass("current").eq(clickedIndex).addClass("current"); 
 
    } 
 
} 
 

 
Class.init();

.a,.b { width:50px; height:50px; background:black; display:inline-block; } 
 
.c { width:20px; height:20px; background:blue; display:inline-block; } 
 
.a.current{ background:red; } 
 
.c.current, .b.current{ background:green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="a current"></div> 
 
<div class="a"></div> 
 
<div class="b"></div> 
 
<div class="b"></div> 
 
<div class="a"></div> 
 
<div class="a"></div> 
 
<div class="related"> 
 
    <div class="c"></div> <div class="c"></div> <div class="c"></div> <div class="c"></div> 
 
</div>

(или обновленную версию скрипки: https://jsfiddle.net/9w8zhg7d/8/)

Answer 2

Хорошо, я чувствую, что решение, которое вы предлагаете, может быть слишком сложным. Вы рассматривали это решение?

HTML:

<div class="container"> 
    <div class="a current"></div> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="b"></div> 
    <div class="a"></div> 
    <div class="a"></div> 
</div> 

CSS:

.container { 
    display: flex; 
    flex-wrap: wrap; 
    width: 100%; 
} 

.container > div { 
    width:50px; 
    margin: 1em; 
    height:50px; 
    background:black; 
} 

.a.current{ 
    background:red; 
} 

Javascript:

$('.container > div').on('click', function() { 
    $('.container > div').removeClass("current"); 
    $(this).addClass('current') 
}); 

Это будет просто применить .current к одной щелкнуло, и при удалении его из всех. Ориентация на родителя позволяет использовать эту функциональность без необходимости работать с классом специфики дочерних div.

JsFiddle: https://jsfiddle.net/9w8zhg7d/7/