Question

我想通过点击元素的索引号来遍历我的选择器。

像这样：

选择一个div的第二个子项（＃tabby-content）

点击其他div的第二个子项（＃tabby-labels）时。

它在下面解决了。但有没有人知道如何“清理代码”并以更好的方式实现同样的目标？

$("#tabby-labels > .first").click(function() {
        $("#tabby-content > .first").siblings('.active').removeClass('active').addClass('inactive');
        $("#tabby-content > .first").addClass('active').removeClass('inactive');
});

$("#tabby-labels > .second").click(function() {
        $("#tabby-content > .second").siblings('.active').removeClass('active').addClass('inactive');
        $("#tabby-content > .second").addClass('active').removeClass('inactive');
});
    $("#tabby-labels > .third").click(function() {
        $("#tabby-content > .third").siblings('.active').removeClass('active').addClass('inactive');
        $("#tabby-content > .third").addClass('active').removeClass('inactive');
});
    $("#tabby-labels > .fourth").click(function() {
        $("#tabby-content > .fourth").siblings('.active').removeClass('active').addClass('inactive');
        $("#tabby-content > .fourth").addClass('active').removeClass('inactive');
});

谢谢！

Answer 1

我认为这样做会：

$("#tabby-label > *").click(function() {
    var index = $(this).index();
    $("#tabby-contents").children('.active').toggleClass("active inactive");
    $("#tabby-contents").children().eq(index).addClass("active").removeClass("inactive");
});

它假设相关元素是两个DIV的唯一直接子元素。

遍历选择器，由单击元素的索引号组成

1 个答案: