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

最简单的可能是在所有三组对象中使用公共类，以便相同的代码可以在任何地方工作。我们必须看到实际的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 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');

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

});

Answer 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");

});

Answer 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");
    });

这应该有效。

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

如何简化此Jquery代码？

6 个答案: