如何正确使用' eq'多个类的功能?因为,上课有一个' a'不是随后的,我不能使用' eq'功能更新了他们的课程。如果删除带有类" b"的div,则该功能可以正常工作。这是一个小提琴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();
非常感谢任何帮助!
答案 0 :(得分:2)
如果我正确理解了您的问题,您想知道所点击的特定.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();
&#13;
.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; }
&#13;
<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>
&#13;
(或者你的小提琴的更新版本:https://jsfiddle.net/9w8zhg7d/8/)
答案 1 :(得分:0)
好的,我觉得你提出的解决方案可能过于复杂。你有没有考虑过这个解决方案?
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/