Question

我有多个同一个类的元素。当我在下面使用此方法时，它不起作用。

<div class="container">
    <div class="content">
        <ul class="tag">
            <li>
                <a href="javascript:;">
                    Lodon
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    Paris
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    Tokyo
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <h3>Lodon</h3>
            <p>London is the capital of England</p>
        </div>
        <div class="tab-content">
            <h3>Paris</h3>
            <p>Paris is the capital of France</p>
        </div>
        <div class="tab-content">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan</p>
        </div>
    </div>
</div>

我的代码：

HTML：

$(".tag li").click(function () {
    var index = $(this).index();
    $(".tab-content")[index].addClass("active-content");
});

和JS

{{1}}

https://codepen.io/WillyIsCoding/pen/KoMxMJ

Answer 1

一个小改动可能对你有帮助

$(".tag li").click(function () {
            var index = $(this).index();
            $(".tab-content").eq(index).addClass("active-content");
 });

Answer 2

那是因为.addClass()是一个jQuery方法，而不是原生的JS方法。

当您使用$(".tab-content")[index]时，您正在jQuery对象中选择真正的DOM元素。使用document.getElementById("id")时获得的元素相同。

就像你将它与jQuery方法结合起来一样：
document.getElementById("id").addClass("class");
这也会产生错误而不起作用：
$(".tab-content")[index].addClass("class");

为了使这个工作，你必须坚持使用jQuery。幸运的是，jQuery有一种方法可以做到这一点：.eq()。就像.addClass()一样，这是一个jQuery方法，因此您可以以相同的方式使用它。

解决方案： $(".tab-content").eq(index).addClass("active-content");

此方法将选择完整匹配元素集的给定索引处的元素，并仅对该元素执行操作。

经过一番摆弄后，我想出了代码的替代实现方法我以为我会把它放在这里，也许有人会发现它很有用：

＆＃13;

$(".select").change(function() {
  $(".tab.active").removeClass("active").addClass("hidden");
  $(".tab").eq($(this).children("option:selected").index()).removeClass("hidden").addClass("active");
});

＆＃13;

.tab.hidden {display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <select class="select">
    <option selected="selected">London</option>
    <option>Paris</option>
    <option>Tokyo</option>
  </select>
  <div class="tab active"><h3>London</h3><p>London is the capital of England</p></div>
  <div class="tab hidden"><h3>Paris</h3><p>Paris is the capital of France</p></div>
  <div class="tab hidden"><h3>Tokyo</h3><p>Tokyo is the capital of Japan</p></div>
</div>

＆＃13;

＆＃13; jsfiddle：https://jsfiddle.net/jdea7mc8/

Answer 3

看看这个

 $(".tag li").click(function () {
        var index = $(this).index();
       $(".tab-content").removeClass("active-content");
       $($(".tab-content")[index]).addClass("active-content"); 
});

除了在标签内容中添加活动类之外，请确保我们删除剩余的活动类。（再次根据我们的要求）

$（元件）[指数] .addClass（）;不起作用

3 个答案: