jQuery代码简化

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

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。 编辑了show语句来纠正这个问题。

Answer 3

由于看起来所有ID都匹配相同的模式，并且您希望绑定到allTabs每个元素的click事件（加上最后的-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(); }); }); }); 

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