[WordPress] 次の jquery コード スニペットは簡潔な方法

スポンサーリンク

Question

以下 jQuery コードとそれがあるがうまく働くが、それは非常にゆっくりと読み込む私は jQuery のプロではないので誰も助けてできますを次のコード スニペットがより簡単ですか?。私はこれを感謝します

jQuery(document).ready(function() {
    // colorpicker field
    jQuery('.twb_btn_color, .twb_spam_clr, .twb_btn_txt_color, .twb_bg_color, .twb_main_title_color, .twb_sub_title_color')
        .each(function(){
            var $this = jQuery(this),
                id = $this.attr('rel');
            $this.farbtastic('#' + id).hide();
            jQuery('.twb, .twb-title').click(function() {
                jQuery('.twb_btn_color').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-spam, .twb-spam-title').click(function() {
                jQuery('.twb_spam_clr').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-btn-txt-color, .twb-btn-txt-color-title').click(function() {
                jQuery('.twb_btn_txt_color').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-bg-color, .twb-bg-color-title').click(function() {
                jQuery('.twb_bg_color').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-main-title-color, .twb-main-title-color').click(function() {
                    jQuery('.twb_main_title_color').fadeIn('medium').siblings("div").hide();
            });
            jQuery('.twb-sub-title-color, .twb-sub-title-color').click(function() {
                jQuery('.twb_sub_title_color').fadeIn('medium').siblings("div").hide();
            });
    });
});

の答え

この処理の典型的な方法は、同じ名前のクラス を同じアクションを実行するすべての要素を与える

また、それらのそれぞれにイベントをバインドする必要があるしないように、共通の親でイベントを委任することができます、この場合我々 は

body

を使用します:

$('body').on('click', '.common-class-name', function () {
   $(this).fadeIn('medium').siblings("div").hide();
});

これはあなたのすべての要素が同じクラス名を与えることが必要です。その後

$(this)

でクリックしてされているものを参照できます

http://stackoverflow.com/questions/27617586/how-to-concise-following-jquery-code-snippet

スポンサーリンク

Leave a Reply