简化代码

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

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

Answer 2

您可以使用 jQuery的多个选择器:

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

编辑：没有注意到选择器之间的不同ID。编辑了节目声明以对此进行纠正。

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

给他们一个可以使用的公共类，然后利用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 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();
});