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

アップデート：

表示されているものが の 1 つであると仮定すると、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 が同じパターンに一致するように見え、(最後に -show を追加して)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();
        });
    });
});
于 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 に答える