1

我正在寻找一些新手 Javascript 帮助。

我有一系列简单的函数,它们使用 JQuery 添加和删除一些滑块内容,点击标注。如何重写它以使用任何类别('cat1'等)内容?

$('.cat1_link').click(function(event) {
    $('.category_slides li').fadeOut();
    $('.cat1').fadeIn();
    $('article.listitem').removeClass('current');
    $('article.listitem.cat1').addClass('current');
});
$('.cat2_link').click(function(event) {
    $('.category_slides li').fadeOut();
    $('.cat2').fadeIn();
    $('article.listitem').removeClass('current');
    $('article.listitem.cat2').addClass('current');
});
4

2 回答 2

4

将您的 HTML 更改为:

<a class="cat_link" data-category="cat1" ...>

然后您可以将 jQuery 编写为:

$('cat_link').click(function(event) {
    var cat_class = $(this).data('category');
    $('.category_slides li').fadeOut();
    $('.'+cat_class).fadeIn();
    $('article.listitem').removeClass('current');
    $('article.listitem.'+cat_class).addClass('current');
});
于 2013-04-30T09:43:02.327 回答
2

提取变化的“东西”并为保持不变的“东西”创建一个通用函数。第一次刺是这样的

$.each(['cat1', 'cat2'], function (i, e) {

    $('.' + e + '_link').click(function(event) {
        $('.category_slides li').fadeOut();
        $('.' + e).fadeIn();
        $('article.listitem').removeClass('current');
        $('article.listitem.' + e).addClass('current');
    });

});

可能有更简洁的方法来执行此操作,具体取决于您的标记的外观(以及您是否可以控制更改它)。

于 2013-04-30T09:40:44.013 回答