我该如何简化这个Jquery代码？

$('a#golf-link').click(function() { 
    $('ul#golf').fadeIn(500); 
    $('ul.img-list').not('#golf').fadeOut(200); 
    $('a#golf-link').addClass("current-link"); 
    $('.side-menu li a').not('#golf-link').removeClass("current-link"); 
    }); 
$('a#bags-link').click(function() { 
    $('ul#bags').fadeIn(500); 
    $('ul.img-list').not('#bags').fadeOut(200); 
    $('a#bags-link').addClass("current-link"); 
    $('.side-menu li a').not('#bags-link').removeClass("current-link"); 
    }); 
$('a#keyrings-link').click(function() { 
    $('ul#keyrings').fadeIn(500); 
    $('ul.img-list').not('#keyrings').fadeOut(200); 
    $('a#keyrings-link').addClass("current-link"); 
    $('.side-menu li a').not('#keyrings-link').removeClass("current-link"); 
    });

正如你所看到的，上面的代码是重复的，我想简化它。我该如何简化这个Jquery代码？

我不确定我是否在这里使用正确的术语，但你应该知道它的要点。

我希望做的是创造像这样

$('a#l-//VARIABLE-HERE//-link').click(function() { 
    $('div#l-//VARIABLE-HERE//').fadeIn(500); 
    $('div.clothes-type').not('#l-//VARIABLE-HERE//').fadeOut(200); 
    $('a#l-//VARIABLE-HERE//-link').addClass("current-link"); 
    $('.side-menu li a').not('#l-//VARIABLE-HERE//-link').removeClass("current-link"); 
    });

的功能，所有我需要做的调用函数和替换//可变//此处的东西，如高尔夫，袋，钥匙圈等。

任何帮助将不胜感激。

谢谢。

来源

2011-08-11 Edwin

代码已经工作，你想提高它的质量？尝试http://codereview.stackexchange.com。 –

向我们展示您的实际HTML，您将获得更加紧凑的选项。 – jfriend00

假设你的命名约定将保持不变：

function setItUp(objName) { 
    $('a#' + objName + '-link').click(function() { 
    $('ul#' + objName).fadeIn(500); 
     $('ul.img-list').not('#' + objName).fadeOut(200); 
     $('a#' + objName + '-link').addClass("current-link"); 
     $('.side-menu li a').not('#' + objName + '-link').removeClass("current-link"); 
    }); 
}

然后，让您的来电：

setItUp('golf'); 
setItUp('bags'); 
setItUp('keyrings');

来源

2011-08-11 01:34:51 cyrotello

最简化的可能是通过在所有三组对象中使用公共类，以便相同的代码可以在任何地方工作。我们必须看到实际的HTML才能知道如何更具体地推荐。

接下来，您可以制作一个函数，它需要一个参数来设置点击处理程序并执行点击操作。

function configureClick(item) { 
    $('a' + item + '-link').click(function() { 
     $('ul' + item).fadeIn(500); 
     $('ul.img-list').not(item).fadeOut(200); 
     $('a' + item + '-link').addClass("current-link"); 
     $('.side-menu li a').not(item + '-link').removeClass("current-link"); 
    }); 
} 

configureClick("#golf"); 
configureClick("#bags"); 
configureClick("#keyrings");

然后最后，如果你告诉我们，实际的HTML，有可能是与标签和标识，可以进行编码以确定对一个给定的点击上班哪些组合的各个项目之间的几何排列（父母，兄弟姐妹，标签类型等）。

来源

2011-08-11 01:23:11 jfriend00

像这样的东西应该工作

$('a[id$="-link"]').click(function() { 

    itemName = $(this).attr('id').replace("-link",""); 

    $('div#'+itemName).fadeIn(500); 
    $('div.clothes-type').not('#l-'+itemName).fadeOut(200); 
    $('a#l-'+itemName +'-link').addClass("current-link"); 
    $('.side-menu li a').not('#l-'+itemName +'-link').removeClass("current-link");   

});

来源

2011-08-11 01:33:14

用户这个

$('a#golf-link,a#bags-link,a#keyrings-link').click(function() { 
    var currentId = $(this).attr('id'); 
    var currentType = currentId.replace("-link", ""); 

    $('ul#'+currentType).fadeIn(500); 
    $('ul.img-list').not('#'+currentType).fadeOut(200); 
    $('a#'+currentId).addClass("current-link"); 
    $('.side-menu li a').not('#'+currentId).removeClass("current-link"); 

});

来源

2011-08-11 01:37:33

$('a[id$="-link"]').click(function() { 
    var idVal = "#" + this.id.match(/(.*)-link/)[1] 
    $('ul'+idVal).fadeIn(500); 
    $('ul.img-list').not(idVal).fadeOut(200); 
    $('a'+idVal+'-link').addClass("current-link"); 
    $('.side-menu li a').not(idVal+'-link').removeClass("current-link"); 
    });

这应该有效。

来源

2011-08-11 01:38:02

考虑一下：

$(menu).click(function(e) { 
    var id = e.target.id.split('-')[0], 
     clss = 'current-link'; 

    $(e.target).closest('li').addClass(clss).siblings().removeClass(clss); 
    $('#' + id, imgslist).fadeIn(500).siblings(':visible').fadeOut(200); 
});

menu哪里是.side-menu元件，和imglist是.img-list元件。我建议你定义在页面加载/ DOM准备，像这样的引用：

var menu = $('.side-menu')[0], 
    imglist = $('.img-list')[0];

（当然，这样做只有当这些元素都是静态页面上）

顺便说一句，我已经定义了该类在LI元素而不是ANCHOR元素上设置，因为它使得JavaScript代码更简单和更具可读性（并且在CSS中定义表示实体的最外层元素上的类也是一种很好的做法）。

来源

2011-08-11 01:51:50

我该如何简化这个Jquery代码？

回答

相关问题