$(element)[index].addClass(); 不起作用

Question

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

$(".tab-content")[index].addClass("active-content");

我的代码：

HTML：

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

和JS

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

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

Answer 1

那是因为.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");

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

经过一番摆弄之后，我想出了你代码的这个替代实现。
我想我会把它放在这里，也许有人会发现它有用：

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

.tab.hidden {display:none;}

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

jsfiddle：https ://jsfiddle.net/jdea7mc8/