Is there a way to effectively utilize the 'eq' function on multiple classes? Due to the non-sequential nature of the divs with class 'a', I am encountering difficulties with using the 'eq' function to update their class. Interestingly, when the divs with class "b" are removed, the function operates flawlessly. Here is a snippet for reference: https://jsfiddle.net/9w8zhg7d/4/. Below is the HTML snippet:
<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>
and the following 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();
Any assistance on this matter would be greatly appreciated!