2

このコードを機能させる適切な方法は何ですか?

$(function(){

    var base = {
            $wrapper: $('.homepage_main'),
            $main: base.$wrapper.find('#primary').find('.home_slides').closest('[data-id="Colleague"]'),
            $panel: base.$wrapper.find('#sidebar').find('.home_slides').closest('[data-id="Colleague"]'),

            Template: {
                $img: function () { return $('img'); }
            },

            Modal: {
                $modalInterrupt: $('#searching_interruption'),
                Suggestion: {
                    $self: $('#suggested_colleague'),
                    $loading: base.Modal.Suggestion.$self.find('.gif_loading'),
                    $paging: base.Modal.Suggestion.$self.find('.pagination'),
                    $itemContainer: base.Modal.Suggestion.$self.find('.request_items'),
                    $itemClone: base.Modal.Suggestion.$itemContainer.find('[data-id="Clonable"]').clone().removeAttr('data-id').removeClass('hide'),
                    $lblCount: base.Modal.Suggestion.$self.find('[data-id="SuggestCount"]'),
                    $listItems: function () {
                        return base.Modal.Suggestion.$itemContainer.find('.coll_panel_content:not([data-id="Clonable"])');
                    }
                }
            }
        };
});  

Google ChromeUncaught TypeError: Cannot read property '$wrapper' of undefinedコンソールを見るとわかります。

いくつかのフィドル

を引き出してみましたが、$wrapper新しいエラーが発生しました:

Uncaught TypeError: Cannot read property 'Modal' of undefined   

別のフィドル サンプル

管理がより簡単なので、このアプローチを採用しました。たとえば、HTML ページでクラス名または ID を変更した場合、jquery コードで特定の変数を 1 つ変更するだけで、すべてが正常に戻ります。より良いアプローチを知っている場合は、親切に私に共有してください。

4

1 に答える 1

4

定義中の変数は使用できません。したがって、短い例は次のようになります。

var hi = "hi" + hi.length;

変数がまだ完全に定義されていないためです。

コードを機能させるには、必要な変数を事前に定義します。

$(function(){
    var $wrapper = $('.homepage_main'),
        $modalSelf = $('#suggested_colleague'),
        $itemContainer = $modalSelf.find('.request_items');
    var base = {
            $main: $wrapper.find('#primary').find('.home_slides').closest('[data-id="Colleague"]'),
            $panel: $wrapper.find('#sidebar').find('.home_slides').closest('[data-id="Colleague"]'),

            Template: {
                $img: function () { return $('img'); }
            },

            Modal: {
                $modalInterrupt: $('#searching_interruption'),
                Suggestion: {
                    $loading: $modalSelf.find('.gif_loading'),
                    $paging: $modalSelf.find('.pagination'),
                    $itemClone: $itemContainer.find('[data-id="Clonable"]').clone().removeAttr('data-id').removeClass('hide'),
                    $lblCount: $modalSelf.find('[data-id="SuggestCount"]'),
                    $listItems: function () {
                        return $itemContainer.find('.coll_panel_content:not([data-id="Clonable"])');
                    }
                }
            }
        };
});
于 2013-04-04T06:22:50.743 に答える