如何简化这段Jquery代码？

Question

$('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");
    });

正如你所看到的，上面的代码是重复的，我想简化它。

我不确定我在这里是否使用了正确的术语，但您应该理解它的要点。

我想要做的是创建一个函数，如下所示

$('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");
    });

我所需要做的就是调用这个函数并将//VARIABLE-HERE//替换为高尔夫、袋子、钥匙圈等。

任何帮助都将不胜感激。

谢谢。

Answer 1

假设您的命名约定是恒定的：

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');

Answer 2

最简单的方法是在所有三组对象中使用公共类，这样相同的代码就可以在任何地方运行。但是，我们必须看到实际的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，各种项目之间可能会有几何排列，这些项目与标记和标识符结合在一起，可以编码以确定对于给定的单击要处理哪些项(父项、兄弟项、标记类型等)。

Answer 3

像这样的东西应该是可行的

$('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");        

});