0

最近カルーセルを作成し、すべてを小さな関数などに分割してコードをクリーンアップしようとしています。私は、すべての変数（およびおそらく関数？）をJavascriptオブジェクトに入れて、ファイル内の他のすべてのコード（非常に大きなファイル：p）から分離するというアイデアを試してきました。

これが私がいじっていたコードの小さな断片です

$('document').ready(function(){

// an object to hold all of my variables and methods that deal with the infinite carousel
var carouselVars = {
      carouselBgWrapper: $('#carousel_bg_wrapper'),
      carouselItems : $('#carousel_ul li'),                 // a jquery object that holds all the li elements in the carousel ul
      carouselWrapper : $('#carousel_wrapper'),         // a jquery object that holds the carousel wrapper div
      carouselUl : $('#carousel_ul'),                       // a jquery object that holds the carousel ul

      //kept getting firebug error "ReferenceError: carouselWrapper/carouselItems is not defined

              //totalItems : carouselItems.length,
      //itemWidth : carouselItems.eq(1).outerWidth(true),   // size of second item plus its 8px left margin
      //visibleImages : Math.ceil( carouselWrapper.width()/itemWidth ),     // number of items visible at a time ???starting to question this math
      //scrollDistance : itemWidth*visibleImages,                   // number of pixels that need to be animated over when moving left or right
      //neededImages: visibleImages - remainingImages,      // number of images that must be added to the last page to give us a full page

      scrollSpeed : 1200,                                                   // animation duration of the carousel slide (in milliseconds)
      currentPage : 1,                                                      // default current page to 1
      moveRight: function(){
        console.log("move right --- carouselVars");
      }
}

carouselVars.totalItems = carouselNS.carouselItems.length;                                              // the number of li's in the list (will not change)
carouselVars.itemWidth = carouselVars.carouselItems.eq(1).outerWidth(true);                     // width of second item plus its 8px left margin
carouselVars.visibleItems = Math.ceil( carouselVars.carouselWrapper.width()/carouselVars.itemWidth );       // number of items visible at a time
carouselVars.moveDistance = carouselVars.itemWidth*carouselVars.visibleImages;                  // number of pixels to animate over when moving left or right
carouselVars.pages = Math.ceil( carouselVars.totalItems/carouselVars.visibleItems );                // the total number of pages in the carousel
carouselVars.remainingItems = carouselVars.totalItems%carouselVars.visibleItems;                    // number of images that are on last page (might be less than 4)
carouselVars.neededItems = carouselVars.visibleItems - carouselVars.remainingItems;             // number of images that must be added to the last page to give us a full page


carouselNS.carouselBgWrapper.on('click','#carousel_next_item',carouselVars.moveRight());        // move carousel right on mouse click
carouselNS.carouselBgWrapper.on('click','#carousel_prev_item',carouselVars.moveLeft());     // move carousel right on mouse click
});

コードのフォーマットがかなり悪い場合は申し訳ありません。

このコードを使おうとすると、firebugが次のエラーを吐き出します。

"ReferenceError: carouselItems not defined"

carouselItems : $('#carousel_ul li')を使用して参照されているul内のリスト項目の数を取得しようとしているため、この問題が発生していると思いtotalItems = carouselItems.lengthます。

この問題を回避するために、変数をオブジェクトに個別に追加しようとしましたが、エラーが発生しているようには見えませんが、同時に、ひどく肥大化して醜いように見えます。

通常のJavascriptオブジェクト内でjQueryオブジェクトメソッドを使用する方法はありますか？また、私がやっていることは実用的でさえありますか？

4

1 に答える 1

1

この問題はjQueryとは何の関係もありません。それは単にあなたがやりたいことが不可能だからです。初期化中にオブジェクトを参照することはできません。この回答を参照してください：https ：//stackoverflow.com/a/12789163/551093

しかし、後でそれを参照することができます。例：

var carouselVars = {
      carouselBgWrapper: $('#carousel_bg_wrapper'),
      carouselItems : $('#carousel_ul li'),                 // a jquery object that holds all the li elements in the carousel ul
      carouselWrapper : $('#carousel_wrapper'),         // a jquery object that holds the carousel wrapper div
      carouselUl : $('#carousel_ul'),                       // a jquery object that holds the carousel ul

      ...
}

carouselVars.totalItems = carouselVars.carouselItems.length;
于 2012-12-22T23:26:33.897 に答える