Question

我最近建了一个旋转木马，我一直试图通过将所有东西分成更小的功能来清理代码。我一直在想把所有变量（也许是函数？）放到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')获取totalItems = carouselItems.length引用的ul中的列表项数。

为了尝试边解决这个问题，我尝试将变量分别添加到对象中，看起来我没有收到错误，但与此同时，它看起来非常臃肿和丑陋。< / p>

有没有办法在常规Javascript对象中使用jQuery对象方法？而且，我正在做什么甚至实用？

Answer 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;

是否可以在常规javascript对象中包含jQuery对象？

1 个答案: