Question

如何正确使用＆＃39; eq＆＃39;多个类的功能？因为，上课有一个＆＃39; a＆＃39;不是随后的，我不能使用＆＃39; eq＆＃39;功能更新了他们的课程。如果删除带有类＆＃34; b＆＃34;的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();

非常感谢任何帮助！

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，但仍然将我上面所说的内容与您的代码一起提供了类似的内容：

＆＃13;

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/）

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/

使用jQuery＆＃39; .eq（）＆＃39;有多个班级

2 个答案: