- 首页
- 前端开发
- $(element)[index].addClass();不起作用
$(element)[index].addClass();不起作用
[英] $(element)[index].addClass(); does not work
本文介绍了$(element)[index].addClass();不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有多个具有相同类的元素.当我在下面使用此方法时，它不起作用.
$(".tab-content")[index].addClass("active-content");
我的代码:
HTML:
<div class="内容"><ul class="tag"><li><a href="javascript:;">洛东</a><li><a href="javascript:;">巴黎</a><li><a href="javascript:;">东京</a><div class="tab-content"><h3>Lodon</h3><p>伦敦是英格兰的首都</p>
<div class="tab-content"><h3>巴黎</h3><p>巴黎是法国的首都</p>
<div class="tab-content"><h3>东京</h3><p>东京是日本的首都</p>
和JS
$(".tag li").click(function () {var index = $(this).index();$(".tab-content")[index].addClass("active-content");});
https://codepen.io/WillyIsCoding/pen/KoMxMJ
解决方案
那是因为 .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><选择类=选择"><option selected="selected">伦敦</option><option>巴黎</option><option>东京</option></选择><div class="tab active"><h3>伦敦</h3><p>伦敦是英格兰的首都</p></div><div class="tab hidden"><h3>巴黎</h3><p>巴黎是法国的首都</p></div><div class="tab hidden"><h3>东京</h3><p>东京是日本的首都</p></div>
jsfiddle:https://jsfiddle.net/jdea7mc8/
I have multiple element with the same class. When I use this method below, it does not work.
$(".tab-content")[index].addClass("active-content");
My code:
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>
And JS
$(".tag li").click(function () {
var index = $(this).index();
$(".tab-content")[index].addClass("active-content");
});
https://codepen.io/WillyIsCoding/pen/KoMxMJ
解决方案
That's because .addClass() is a jQuery-method, not a native JS-method.
And when you use $(".tab-content")[index], you are selecting the true DOM-element within the jQuery-object. The same kind of element you get when you use document.getElementById("id").
And just like when you would combine that with a jQuery-method:
document.getElementById("id").addClass("class");
this too will generate an error and not work:
$(".tab-content")[index].addClass("class");
In order to get this working, you have to stick with jQuery. Luckily, jQuery has a method to do just that: .eq(). Just like .addClass(), this is a jQuery-method so you can use it in the same manner.
SOLUTION: $(".tab-content").eq(index).addClass("active-content");
This method will select the element at the given index of the complete set of matching elements, and only perform the action on that one element.
After a bit of fiddling around, I came up with this alternative implementation of your code.
I thought I'd put it on here, maybe someone will find it useful:
$(".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/
这篇关于$(element)[index].addClass();不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
