如何縮短我的JQuery標簽？

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

通過找到您單擊的選項卡的父節點以及作為目標的面板並將其用作隱藏其他選項卡/面板的基礎，而不是依賴於類似的類名，可以起作用。