Question

我正在尝试为我的标签清理我的JQuery代码。我有3种不同的风格。如何缩短以下内容？

$(document).ready(function () {
    $('.tabs-style1 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs-style1 li').removeClass('current');
        $('.tab-content-style1').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

$(document).ready(function () {
    $('.tabs-style2 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs-style2 li').removeClass('current');
        $('.tab-content-style2').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

$(document).ready(function () {
    $('.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('.tabs-style3 li').removeClass('current');
        $('.tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

我们将非常感谢您的帮助！ http://michellecantin.ca/test/features/tabs/

Answer 1

这应该有效：

$(document).ready(function () { // use one document.ready
    $('ul[class*="tabs-style"] li').click(function (e) { // and one click handler
        var self = $(this), // cache DOM lookup
            styles = {
                "tabs": ".tabs-style",
                "content": ".tab-content-style"
            },
            i = self.parent().hasClass('.tabs-style1') ? '1' : self.parent().hasClass('.tabs-style2') ? '2' : '3', // get style number
            tab_id = self..attr('data-tab');
        styles.tabs += i; // concatenate style number
        styles.content += i;
        self = $(styles.tabs + ' li'); // re-lookup DOM element and cache again
        self.removeClass('current'); // unsure why you are doing this
        $(styles.content).removeClass('current');
        self.addClass('current');
        $("#" + tab_id).addClass('current');
    });
});

虽然我确信有人比我能进一步重构更聪明，但我完全赞同@ gloomy.penguin，因为减少代码行数只会降低其可读性（因此可维护性较差）

如果你真的想要在.js文件中占用更少的空间，请使用缩小工具（有很多）。

Answer 2

通过这样做，您可以使您的代码更具通用性和面向未来：

首先，向所有具有标签的元素添加tabbar类。然后，这应该是你的jQuery：

$(function () {
    $('.tabs>li').click(function () {
        var tab_id = this.getAttribute('data-tab');
        var target = document.getElementById(tab_id);
        $(this.parentNode).children().removeClass("current");
        $(target.parentNode).children().removeClass("current");
        $(this).addClass('current');
        $(target).addClass('current');
    });
});

这可以通过查找您单击的选项卡的父节点以及作为目标的面板，并使用它作为隐藏其他选项卡/面板的基础，而不是依赖于相似的类名来实现。

如何缩短我的JQuery选项卡？

2 个答案: