Код jQuery для упрощения

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's multiple selector:

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

EDIT: не заметил другого идентификатора между селекторами. Отредактировал оператор show, чтобы исправить это.

Answer 3

Дайте им общий класс, который вы можете использовать для их выбора, затем используйте первую часть идентификатора, чтобы построить селектор для .show().

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

---

Update:

Предполагая, что один показывается один из 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 4

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 5

Так это выглядит, как все идентификаторы совпадают по той же схеме, и вы хотите привязать к 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(); 
     }); 
    }); 
}); 

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