JQuery код для упрощения - PullRequest
Новая
       8

JQuery код для упрощения

1 голос
/ 04 января 2011

Я получил этот код, но он немного повторяется, есть ли способ сделать его короче? 

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

Ответы [ 6 ]

7 голосов
/ 04 января 2011

Вы можете использовать множественный селектор jQuery : 

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

РЕДАКТИРОВАТЬ: не заметил другой идентификатор между селекторами. Отредактировал оператор show, чтобы исправить это.

2 голосов
/ 04 января 2011

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

Дайте им общий класс, который вы можете использовать для их выбора, а затем используйте первую часть идентификатора для создания селектора для .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','')
1 голос
/ 04 января 2011 
allTabs.click(function() {
    event.preventDefault();
    allTabs.hide();
    var id = jQuery(this).attr('id');
    var el = jQuery('#'+id.substring(0,id.indexOf('-')));
    el.show();
});
0 голосов
/ 04 января 2011 
$('#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();
});
0 голосов
/ 04 января 2011 
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();
    });
}

});

...