javascript - 使用 .width() 返回未定义

Question

我目前正在构建一个脚本来创建 slider ，并偶然发现了一个我似乎无法解决的错误。基本上我试图获取容器的宽度并将其乘以内部幻灯片的数量。

这是我正在处理的代码片段。每当我尝试使用 .width 来获取容器的宽度时，它都会在控制台上返回 undefined 。我尝试来回查看我的代码，但我似乎无法查明问题所在。

_setSliderWidth() {
    this.sliderBanner = this.$el.find('.slider-banner');
    this.sliderBannerWidth = this.sliderBanner.width();

    console.log(this.sliderBannerWidth);


    this.slides.width(this.sliderBannerWidth);
    this.slidesContainer.width(this.sliderBanner.width() * this.slideCount);

  }



  -- -- -- -- --


  'use strict';

(function($) {

  /**
   * Base Image Slider class
   */
  class ImageSlider {

    constructor(el) {
      this.$el = $(el);
      this._dom();

      this.slideCount = this.slides.length;
      this.currentSlide = 0;

      this.arrows = {
        prev: this.$el.find('.arrow.-prev'),
        next: this.$el.find('.arrow.-next')
      };

      // image formatting and detection
      this.$el.find('img').each(function(e, el) {
        let $img = $(el);

        if ($img.height() > $img.width())
          $img.addClass('-portrait');
      });

      this._setSliderWidth();
    }

    _dom() {
      this.slides = this.$el.find('.slides');
      this.slidesContainer = this.$el.find('.slider-items');

    }

    init() {
      this._bind();
      this._evaluatePosition();
    }

    _bind() {
      this.arrows.next.on('click', this._nextSlide.bind(this));
      this.arrows.prev.on('click', this._prevSlide.bind(this));
    }

    _nextSlide() {
      this.currentSlide++;
      this._moveSlide();
    }

    _prevSlide() {
      this.currentSlide--;
      this._moveSlide();
    }

    _setSliderWidth() {
      this.sliderBanner = this.$el.find('.slider-banner');
      this.sliderBannerWidth = this.sliderBanner.width();

      console.log(this.sliderBannerWidth);


      this.slides.width(this.sliderBannerWidth);
      this.slidesContainer.width(this.sliderBanner.width() * this.slideCount);

    }

    _moveSlide() {

      // set the min and max range
      if (this.currentSlide < 0) this.currentSlide = 0;
      if (this.currentSlide > this.slideCount - 1) this.currentSlide = this.slideCount - 1;


      this._evaluatePosition();
      this._move();
    }

    _move() {
      let position = this.currentSlide * -100;
      this.slidesContainer.css({
        transform: 'translate(' + position + '%, 0)'
      });
    }

    _evaluatePosition() {
      this.arrows.prev.toggleClass('-hide', (this.currentSlide === 0));
      this.arrows.next.toggleClass('-hide', (this.currentSlide === this.slideCount - 1));
    }

  }



  $(document).ready(function() {

    //--------------------------------------------------
    // Image Slider
    let $imageSliders = $('.image-slider');

    $imageSliders.each(function(e, el) {
      let imageSlider = new ImageSlider(el);
      imageSlider.init();
    });


    //--------------------------------------------------
    // Slider Banner
    let $bannerSliders = $('.slider-banner');

    $bannerSliders.each(function(e, el) {
      let bannerSlider = new ImageSlider(el);
      bannerSlider.init();
    });

  });

})(jQuery);

HTML

<div class="slider-banner -alternate">
  <span href="#" class="arrow -prev -hide"></span>
  <span href="#" class="arrow -next"></span>
  <div class="slider-items">
    <div class="slides">
      <div class="image" style="background-image:url(/iom/sites/default/files/2018-07/partnerships-2_0.jpg)">
        <div class="banner-detail">
          <div class="article-detail">
            <div class="timestamp">
              <a href="#" class="tag-label">page</a>
            </div>
            <h2 class="title">
              <a href="#">Migrant Integration</a>
            </h2>
            <div class="mini-caption">
              IOM supports policies and strategies that promote the social, economic and cultural inclusion of migrants within existing legal frameworks in countries of destination.
            </div>
            <a href="/iom/node/65348" class="button">More Details</a>
          </div>
        </div>
      </div>
    </div>
    <div class="slides">
      <div class="image" style="background-image:url(/iom/sites/default/files/2018-07/definitional-issues_1.jpg)">
        <div class="banner-detail">
          <div class="article-detail">
            <div class="timestamp">
              <a href="#" class="tag-label">page</a>
            </div>
            <h2 class="title">
              <a href="#">Forum on Migration, Trade and the Global Economy</a>
            </h2>
            <div class="mini-caption">
              IOM, together with partners ICTSD and Fundanción Foro del Sur will host the Forum on Migration, Trade &amp; the Global Economy in Buenos Aires on 14 December.
            </div>
            <a href="/iom/forum-migration-trade-and-global-economy" class="button">More Details</a>
          </div>
        </div>
      </div>
    </div>
    <div class="slides">
      <div class="image" style="background-image:url(/iom/sites/default/files/2018-07/identity-management_0.jpg)">
        <div class="banner-detail">
          <div class="article-detail">
            <div class="timestamp">
              <a href="#" class="tag-label">page</a>
            </div>
            <h2 class="title">
              <a href="#">Comparative Research on the Assisted Voluntary Return and Reintegration of Migrants</a>
            </h2>
            <div class="mini-caption">
              Assisted Voluntary Return and Reintegration (AVRR) is an indispensable part of a comprehensive approach to migration management aiming at orderly and humane return and reintegration of migrants.
            </div>
            <a href="/iom/comparative-research-assisted-voluntary-return-and-reintegration-migrants" class="button">More Details</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

从您的屏幕截图和代码看来，this. sliderBanner 对象不返回 DOM 对象，因此 .width() 将是未定义的。

要解决这个问题，您可以:1) 通过 this.sliderBanner.prevObject 的奇怪方法检索 DOM 对象。此线程中的更多信息:What is prevObject and why is my selector returning that?

主要问题是 $el 对象中的 .find 不能在其 DOM 中包含 slider 横幅对象，所以...

2) 尝试使用 this.sliderBanner = $(".sliderbanner") 从文档对象中选择横幅