Question

我有这段代码，但它有点重复，有没有办法缩短它？

 jQuery(document).ready(function() {
    var allTabs = jQuery('#front, #blog, #portfolio, #pages, #colors, #fonts');
    allTabs.hide();

    jQuery('#front-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#front').show();
    });

    jQuery('#blog-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#blog').show();
    });

    jQuery('#portfolio-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#portfolio').show();
    });

    jQuery('#pages-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#pages').show();
    });

    jQuery('#colors-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#colors').show();
    });

    jQuery('#fonts-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery('#fonts').show();
    });
});

Answer 1

您可以使用jQuery's multiple selector：

$("#fonts-show,#pages-show,#portfolio-show,#blog-show,etc...").click(function() {
    event.preventDefault();
    allTabs.hide();
    $("#"+$(this).attr("id").split("-")[0]).show();
});

编辑：没有注意到选择器之间的不同ID。编辑了show语句来纠正这个问题。

Answer 2

为他们提供一个可用于选择它们的公共类，然后利用ID的第一部分为.show()构建一个选择器。

jQuery('.someClass').click(function( event ) {
    event.preventDefault();
    allTabs.hide();
    jQuery('#' + this.id.split('-')[0] ).show();  // 'front-show' becomes '#front'
});

<强>更新

假设显示的是allTabs之一，我会这样做。

jQuery('.someClass').click(function( event ) {
    event.preventDefault();
    allTabs.hide().filter('#' + this.id.split('-')[0] ).show();
});

避免重复DOM选择。

此外，而不是：

'#' + this.id.split('-')[0]

......你可以这样做：

'#' + this.id.replace('-show','')

Answer 3

由于看起来所有ID都匹配相同的模式，并且您希望为click中的每个元素绑定allTabs事件（加上 - 结尾显示），您可以迭代在你的allTabs变量上并以这种方式绑定：

jQuery(document).ready(function() {
    var allTabs = jQuery('#front, #blog, #portfolio, #pages, #colors, #fonts');
    allTabs.hide();

    allTabs.each(function() {
        var id = jQuery(this).attr('id');
        var $target = jQuery(this);
        jQuery("#" + id + "-show").click(function(event) {
            event.preventDefault();
            allTabs.hide();
            $target.show();
        });
    });
});

Answer 4

allTabs.click(function() {
    event.preventDefault();
    allTabs.hide();
    var id = jQuery(this).attr('id');
    var el = jQuery('#'+id.substring(0,id.indexOf('-')));
    el.show();
});

Answer 5

jQuery(document).ready(function() {
var allTabs = jQuery('#front, #blog, #portfolio, #pages, #colors, #fonts');
allTabs.hide();

var ids = ['#front', '#blog', '#portfolio', '#pages', '#colors', '#fonts'];
for(var x in ids)
{
    jQuery(ids[x] + '-show').click(function() {
        event.preventDefault();
        allTabs.hide();
        jQuery(ids[x]).show();
    });
}

}）;

Answer 6

$('#fonts-show,#pages-show,#portfolio-show,#blog-show,etc...').click(function() {
    event.preventDefault();
    allTabs.hide();
    var showId = $(this).attr('id');
    var targetId = id.substring(0,id.indexOf('-'));
    $('#'+targetId).show();
});

jQuery代码简化

6 个答案: