关于“索引”，我认为是对的，错的是对的。 我不知道为什么

Question

看一下代码：

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

以上代码，我认为它应该可以正常工作，但是我错了。 我不知道为什么。 第二个事件：每当您单击哪个“ a”标签时，“ div”仅滑动第一个事件，其他div不滑动。

另一种方法是错误的相同：

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

顺便说一句，我也测试了.get(index)方法，浏览器说：它不支持该方法！

有大师可以解决这个难题吗？

伙计们！ 通过一次又一次的测试，我终于明白了。 让我显示正确的代码：

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

计划B：

<script language="javascript" type="text/javascript">
$(".test a").click(function(){
    x = $(this).index();
    $(this).toggleClass("hover");
    $(".test div").eq(x).slideToggle();
    });
</script>

要不就：

<script language="javascript" type="text/javascript">
$(".test a").click(function(){
    $(this).toggleClass("hover");
    $(".test div").eq($(this).index()).slideToggle();
    });
</script>

计划C：来自@ŠimeVidas的方法

<script language="javascript" type="text/javascript">
$(".test").on("click","a",function(){
    $(this).toggleClass("hover");
    $(this).parent().siblings().eq($(this).index()).slideToggle();
    });
</script>

我测试:eq(" + index + ")它不起作用。 但是.eq(index)效果很好！ 是选择器:eq(n)中的均值，n不能是变量，但是在方法.eq(n) ，n可以是变量？

我测试了.on方法，它不适用于jquery-1.6.4.min，但可以与jquery-1.7.1.min一起很好地工作。

还有另外一件有趣的事情：计划B，第一个代码，在某些更复杂的条件下， x变量始终为0 ，但是第二个代码没有这个问题。 我还不能弄清楚。

谢谢大家，为您提供的所有方法和帮助，没有您，我无法弄清楚。

Answer 1

您必须断开字符串，并将index的实际值插入选择器。

更改

$(".test div:eq(index)").slideToggle();  // here works incorrectly!
});

至

$(".test div:eq(" + index + ")").slideToggle();   // should work now!
});

---

同样，您的第二个错误。

更改

$(".test div:eq(x)").slideToggle();

至

$(".test div:eq(" + x + ")").slideToggle();

Answer 2

尝试这个：

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

Answer 3

hmmm ...也许是这样的，使用闭包并将索引更改为值而不是字符串名称。

$(".test a").each(function(index,element){
    var closureIndex=index;
    var closureElement=element;

    $(element).click(function(){
        $(closureElement).toggleClass("hover");                  
        $(".test div:eq("+closureIndex+")").slideToggle();      
        });
});

Answer 4

尝试这个：

$( '.test' ).on( 'click', 'a', function () {
    $( this ).toggleClass( 'hover' );
    $( this ).parent().siblings().eq( $( this ).index() ).slideToggle();
});