關於“索引”，我認為是對的，錯的是對的。 我不知道為什么

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();
});