1

我有这个代码，但它有点重复，有没有办法让它更短？

 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();
    });
});
4

6 回答 6

7

您可以利用jQuery 的多重选择器：

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

编辑：没有注意到选择器之间的不同 id。编辑了 show 语句以纠正这一点。

于 2011-01-04T18:05:35.947 回答
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','')
于 2011-01-04T18:08:51.237 回答
2

由于看起来所有的 id 都匹配相同的模式，并且您希望click为每个元素绑定到事件allTabs（最后加上 -show），您可以遍历 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();
        });
    });
});
于 2011-01-04T18:10:05.997 回答
1 
allTabs.click(function() {
    event.preventDefault();
    allTabs.hide();
    var id = jQuery(this).attr('id');
    var el = jQuery('#'+id.substring(0,id.indexOf('-')));
    el.show();
});
于 2011-01-04T18:10:15.723 回答
0 
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();
    });
}

});

于 2011-01-04T18:09:45.303 回答
0 
$('#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();
});
于 2011-01-04T18:17:49.437 回答