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

任何帮助将不胜感激。

谢谢。

4

6 回答 6

3

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

于 2011-08-11T01:23:11.583 回答
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');
于 2011-08-11T01:34:51.627 回答
0

考虑一下：

$(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-11T01:51:50.593 回答
0

像这样的东西应该工作

$('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-11T01:33:14.770 回答
0

使用这个

$('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-11T01:37:33.747 回答
0 
$('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-11T01:38:02.853 回答