淡入淡出取决于div id

Question

我有一个jquery代码来区分两个div

$("#addresslink").click(function() {
    $("#main").find("div").each(function(n,i){
        var id = this.id;
        if(id == "addressdiv")
        {
            $('#' + id).fadeIn(300);
        }
        else
        {
            $('#' + id).fadeOut(250);
        }
    });
});

$("#storylink").click(function() {
    $("#main").find("div").each(function(n,i){
        var id = this.id;
        if(id == "storydiv")
        {
            $('#' + id).fadeIn(300);
        }
        else
        {
            $('#' + id).fadeOut(250);
        }    
    });
});

有没有更好的方法将a绑定到div，而不是将每个div硬编码到a，然后显示和隐藏其他div？

p.S：我已经完成了代码，只是问我是否可以优化它？

Answer 1

在不更改任何内容的情况下进行优化的一种方法是将通用代码移动到函数：

$("#addresslink").click(function() {
   fadeDiv('addressdiv');
});
$("#storylink").click(function() {
    fadeDiv('storydiv');     
});
function fadeDiv(divName) {
  $("#main").find("div").each(function(n,i){
            var id = this.id;
            if(id == divName)
            {
                $('#' + id).fadeIn(300);
            }
            else
            {
                $('#' + id).fadeOut(250);
            }    
        });
}

或

你也可以这样做：

$("#addresslink,#storylink").click(function() {
    fadeDiv(($(this).attr('id')=='addresslink')?'addressdiv':'storydiv');
});
function fadeDiv(divName) {
  $("#main").find("div").each(function(n,i){
            var id = this.id,
$id = $('#' + id);
            (id == divName)? $id.fadeIn(300):$id.fadeOut(250);
        });
}​

Answer 2

你的意思是：

$("#addresslink, #storylink").click(function() {
    $("#main").find("div").each(function(n,i){
        var id = this.id;
        if(id == "addressdiv")
        {
            $('#' + id).fadeIn(300);
        }
        else
        {
            $('#' + id).fadeOut(250);
        }
    });
});