Question

我在父母的一个孩子身上有一些<div>...</div>。以及同一父母的其他孩子的一些<a>click</a>按钮。当我点击child-2的第一个链接时，必须显示孩子的第一个div。

以下是我使用的fiddle。

但是，我使用了类名来显示或隐藏div。我需要一个可以自动选择第n个元素的脚本。

我使用的代码如下。

$('.box').hide();

$(".click-btn1").on('click', function() {
    $('.box').slideUp('slow');
                $(this).parent().parent().parent().parent().children().children(".box1").slideDown('slow');
});

$(".click-btn2").on('click', function() {
    $('.box').slideUp('slow');
                $(this).parent().parent().parent().parent().children().children(".box2").slideDown('slow');
});

$(".click-btn3").on('click', function() {
    $('.box').slideUp('slow');
                $(this).parent().parent().parent().parent().children().children(".box3").slideDown('slow');
});

Answer 1

使用.index()可以大大简化您的代码：

$('.box').hide();

$(".click-btn").on('click', function () {
    $('.box').slideUp('slow');
    var i = $(this).parent().parent().index();
    $('.box').eq(i).slideDown('slow');
});

这只是确定它是哪个按钮，然后在该索引处滑动框。

Answer 2

如果您的DOM元素的顺序相同，则可以index执行此操作：

$('.box').hide();

$(".click-btn").on('click', function() {
    $('.box').slideUp('slow');
    $('.total-1').children().eq($(this).parents('.single').index()).slideDown('slow');
});

点击第n个链接时如何显示或隐藏第12个div？

2 个答案: