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>

上面的代码，我认为它应该运作良好，但我错了。我不知道为什么。第二个事件：“div”只滑动第一个，其他div不滑动，每当你点击哪个“a”标签。

另一种方式是错误的：

<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

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

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

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

4 个答案: