Question

我有两组ID，一组称为“Andrea”，第二组称为“Robert”。每组从1到40运行，所以我有例如：

Andrea1，＃Andrea2，＃Andrea3，＃Andrea4等..

和罗伯特一样：

Robert1，＃Robert2，＃Robert3，＃Robert4等...

我需要将每个ID相互链接，例如：

$(document).ready(function(){
    $("#Andrea1").hover(function(){
        $("#Andrea1").fadeOut('slow');
        $("#Robert1").fadeOut('slow');
    }, function(){
        $("#Andrea1").fadeIn('slow');
        $("#Robert1").fadeIn('slow');
    });
});

但正如你所知道的那样，它并不聪明。所以我的问题是：有没有办法以更聪明的方式做到这一点？这样的事情:(我知道这不正确，但这是一种解释它的方式）

$(document).ready(function(){
    $("#Andrea[i]").hover(function(){
        $("#Andrea[i]").fadeOut('slow');
        $("#Robert[i]").fadeOut('slow');
    }, function(){
        $("#Andrea[i]").fadeIn('slow');
        $("#Robert[i]").fadeIn('slow');
    });
});

Answer 1

最简单的方法是向所有项添加一些共享class，并将其用作jQuery选择器。但是，如果您无法控制HTML，可以使用迭代器循环，并使用该迭代器连接这些元素：

$(document).ready(function(){
    for(var i=1;i < 41; i++){ 
        $("#Andrea" + i).hover(function(){
            $("#Andrea" + i).fadeOut('slow');
            $("#Robert" + i).fadeOut('slow');
        }, function(){
            $("#Andrea" + i).fadeIn('slow');
            $("#Robert" + i).fadeIn('slow');
        });
    }
});

或者，如果项目的总数是可变的，您可以添加一些逻辑：

$(document).ready(function(){
    // use a regex as a filter to find total amount of divs 
    // with an id that starts with  the string "Andrea"
    var max = $("div").filter(function() {
        return this.id.match(/Andrea/);
    }).length;

    for(i=1;i < max; i++){ 
        $("#Andrea" + i).hover(function(){
            $("#Andrea" + i).fadeOut('slow');
            $("#Robert" + i).fadeOut('slow');
        }, function(){
            $("#Andrea" + i).fadeIn('slow');
            $("#Robert" + i).fadeIn('slow');
        });
    }
});

Answer 2

为所有Andrea和Robert ids说group添加公共类。

尝试：

$(document).ready(function(){
    $(".group").hover(function(){
        var id = $(this).attr("id").split("Andrea").pop();
        $(this).fadeOut('slow');
        $("#Robert"+id).fadeOut('slow');
    }, function(){
        var id = $(this).attr("id").split("Andrea").pop();
        $(this).fadeIn('slow');
        $("#Robert"+id).fadeIn('slow');
    });
});

DEMO here.

从数组中添加选择器上的参数

2 个答案: