如何简化此 Jquery 代码？答案

【问题标题】：How can I simplify this Jquery code?如何简化此 Jquery 代码？
【发布时间】：2011-08-11 01:20:53
【问题描述】：

$('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// 替换为高尔夫球、包、钥匙圈等。

任何帮助将不胜感激。

谢谢。

【问题讨论】：

代码是否已经运行，并且您想提高它的质量？试试codereview.stackexchange.com。
向我们展示您的实际 HTML，您将获得更紧凑的选项。

标签： jquery function simplify

【解决方案1】：

最简单的方法是在所有三组对象中使用公共类，以便相同的代码可以在任何地方工作。不过，我们必须查看实际的 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，则各种项目之间可能存在几何排列，这些项目与标签和标识符相结合，可以编码以识别对给定点击（父母、兄弟姐妹、标签类型等...）。

【讨论】：

【解决方案2】：

假设您的命名约定是不变的：

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

【讨论】：

【解决方案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");        

});

【讨论】：

【解决方案4】：

用户这个

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

});

【讨论】：

【解决方案5】：

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

应该可以的。

【讨论】：

【解决方案6】：

考虑一下：

$(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 中将类定义在最外层也是一个很好的做法表示实体的元素）。

【讨论】：