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

对不起，如果代码格式很差。

当我尝试使用此代码时会发生什么，萤火虫吐出以下错误

"ReferenceError: carouselItems not defined"

我认为这个问题正在发生，因为我试图获取 ul 中carouselItems : $('#carousel_ul li')使用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 回答