javascript - 在对象声明中使用 jquery 方法 .find()

Question

我是 js 对象的新手，我正在尝试用 jQuery 编写一个简单的插件，但我在声明属性时遇到问题。
看看这个JSFIDDLE以获得更好的突出显示代码

$.fn.robertSlider = function(params){
    var slider = {
        arrow:              this.find(".slider-arrow"),
        arrowNext:          this.find(".slider-arrow--arrowNext"),
        arrowPrev:          this.find(".slider-arrow--arrowPrev"),
        sliderItem:         this.find(".slider-item"),
        sliderList:         this.find(".slider-content-list"),

        itemsOnScreen:      params.itemsOnScreen,
        marginCollapse:     params.marginCollapse
    };

    slider.amountItems      = slider.sliderItem.length; // is there a way to declare this directly inside the obj?
    slider.sliderWidth      = slider.sliderList.width(); // is there a way to declare this directly inside the obj?

    var helpers = {
        firstVisible:       0,
        canGoNext:          true,
        canGoPrev:          false
    }
}




$(".slider-container").robertSlider({
        itemsOnScreen:          6,
        marginCollapse:         10
});

现在我的问题是:这个对象声明有什么问题？
因为如果我尝试记录 slider.sliderWidth 它不起作用，我会得到 null。我尝试记录 slider.sliderList 当我记录 $(".slider-content-list")

时得到完全不同的结果

更新
下面是 slider.arrow 和 $(".slider-arrow")

之间的日志屏幕截图

希望一切都清楚:)
提前致谢!

Answer 1

您无法在对象声明内设置 amountItems 或 sliderWidth 属性，因为尚未声明对象，因此尚未设置属性值。

例如，您是否拥有:

var a = {
  x: 1,
  y: a.x+1
};

或者:

var a = {
  y: a.x+1,
  x: 1
};

这两种方法都不起作用，因为该对象尚未声明。

对于您的示例，以下内容可行，但显然包括代码重复/性能成本:

var slider = {
    arrow:              this.find(".slider-arrow"),
    arrowNext:          this.find(".slider-arrow--arrowNext"),
    arrowPrev:          this.find(".slider-arrow--arrowPrev"),
    sliderItem:         this.find(".slider-item"),
    sliderList:         this.find(".slider-content-list"),

    itemsOnScreen:      params.itemsOnScreen,
    marginCollapse:     params.marginCollapse,

    amountItems:        this.find(".slider-item").length,
    sliderWidth:        this.find(".slider-item").width()
};

或者你可以这样做:

var obj = {
    arrow:              this.find(".slider-arrow"),
    arrowNext:          this.find(".slider-arrow--arrowNext"),
    arrowPrev:          this.find(".slider-arrow--arrowPrev"),
    sliderItem:         this.find(".slider-item"),
    sliderList:         this.find(".slider-content-list"),
}

var slider = {
    arrow:              obj.arrow,
    arrowNext:          obj.arrowNext,
    arrowPrev:          obj.arrowPrev,
    sliderItem:         obj.sliderItem,
    sliderList:         obj.sliderList,

    itemsOnScreen:      params.itemsOnScreen,
    marginCollapse:     params.marginCollapse,

    amountItems:        obj.sliderItem.length,
    sliderWidth:        obj.sliderItem.width()
};