[英]About the “index”,i think it is right, when it is wrong. i do not know why
Look at the code: 看一下代码:
<div class="test">
<p><a href="#">1</a><a href="#">2</a><a href="#">3</a></p>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<script language="javascript" type="text/javascript">
$(".test a").each(function(index,element){
$(element).click(function(){
$(element).toggleClass("hover"); // here works well
$(".test div:eq(index)").slideToggle(); // here words wrong!
});
});
</script>
above code, i think it should work well,but i am wrong. 以上代码,我认为它应该可以正常工作,但是我错了。 i do not know why.
我不知道为什么。 the second event:the "div" only slidetoggle the first, other div do not slidetoggle, whenever you click which "a" tag.
第二个事件:每当您单击哪个“ a”标签时,“ div”仅滑动第一个事件,其他div不滑动。
another way is wrong the same: 另一种方法是错误的相同:
<script language="javascript" type="text/javascript">
$(".test a").click(function(){
x = $(this).index();
$(this).toggleClass("hover"); // here works well
$(".test div:eq(x)").slideToggle(); // here words wrong!
});
</script>
by the way, i test .get(index)
method too, the browser says: it does not support the method! 顺便说一句,我也测试了
.get(index)
方法,浏览器说:它不支持该方法!
is there a master to solve this difficulty? 有大师可以解决这个难题吗?
guys! 伙计们! Through testing again and again, i finally figured out.
通过一次又一次的测试,我终于明白了。 Let me show the correct code:
让我显示正确的代码:
plan A: 计划A:
<script language="javascript" type="text/javascript">
$(".test a").each(function(index,element){
$(element).click(function(){
$(element).toggleClass("hover");
$(".test div").eq(index).slideToggle();
});
});
</script>
plan B: 计划B:
<script language="javascript" type="text/javascript">
$(".test a").click(function(){
x = $(this).index();
$(this).toggleClass("hover");
$(".test div").eq(x).slideToggle();
});
</script>
OR Just: 要不就:
<script language="javascript" type="text/javascript">
$(".test a").click(function(){
$(this).toggleClass("hover");
$(".test div").eq($(this).index()).slideToggle();
});
</script>
plan C: come from @Šime Vidas `s method 计划C:来自@ŠimeVidas的方法
<script language="javascript" type="text/javascript">
$(".test").on("click","a",function(){
$(this).toggleClass("hover");
$(this).parent().siblings().eq($(this).index()).slideToggle();
});
</script>
I test :eq(" + index + ")
it does not work. 我测试
:eq(" + index + ")
它不起作用。 but .eq(index)
works well! 但是
.eq(index)
效果很好! is that mean in selector :eq(n)
,n could not be variable, but, in method .eq(n)
, n can be variable? 是选择器
:eq(n)
中的均值,n不能是变量,但是在方法.eq(n)
,n可以是变量?
I test .on
method, it does not work with jquery-1.6.4.min, but works well with jquery-1.7.1.min. 我测试了
.on
方法,它不适用于jquery-1.6.4.min,但可以与jquery-1.7.1.min一起很好地工作。
There is another interesting thing:Plan B, the first code, the x
variable is always be 0
in some more complicated condition, but the sencond code has no this problem. 还有另外一件有趣的事情:计划B,第一个代码,在某些更复杂的条件下,
x
变量始终为0
,但是第二个代码没有这个问题。 i can not figure this out yet. 我还不能弄清楚。
thank you all guys, for all your methods and help, without you, i could not figure this out. 谢谢大家,为您提供的所有方法和帮助,没有您,我无法弄清楚。
You have to break your string and insert the actual value for index
into your selector. 您必须断开字符串,并将
index
的实际值插入选择器。
Change 更改
$(".test div:eq(index)").slideToggle(); // here works incorrectly!
});
To 至
$(".test div:eq(" + index + ")").slideToggle(); // should work now!
});
And the same thing for your second error. 同样,您的第二个错误。
Change 更改
$(".test div:eq(x)").slideToggle();
to 至
$(".test div:eq(" + x + ")").slideToggle();
try this: 尝试这个:
<script language="javascript" type="text/javascript">
$(".test a").each(function(index,element){
$(element).click(function(){
$(element).toggleClass("hover"); // here works well
$(".test div:eq(" + index + ")").slideToggle(); // here words wrong!
});
});
</script>
hmmm... maybe something like this using a closure and changing the index to the value not the string name. hmmm ...也许是这样的,使用闭包并将索引更改为值而不是字符串名称。
$(".test a").each(function(index,element){
var closureIndex=index;
var closureElement=element;
$(element).click(function(){
$(closureElement).toggleClass("hover");
$(".test div:eq("+closureIndex+")").slideToggle();
});
});
Try this: 尝试这个:
$( '.test' ).on( 'click', 'a', function () {
$( this ).toggleClass( 'hover' );
$( this ).parent().siblings().eq( $( this ).index() ).slideToggle();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.