javascript - Cannot read property CSS undefined

Question

I'm trying to figure out why the code I'm currently working on produces an error

Cannot read property css underfined.

Currently using jQuery 3.3.1. Not sure if the .css is deprecated. Can't seem to find a workaround it

(function($) {
  'use strict';

  var Slider = {
    init: function() {
      this.$sliderBanner = $('.slider-banner');
      this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
      this.$slides = $('.slides', this.$sliderItemsWrapper);
      this.$sliderButtons = $('.arrow', this.$sliderBanner);
      this.slideCount = $('.slides', this.$sliderItemsWrapper).length;

      this.sliderBannerWidth = $(this.$sliderBanner).width();
      this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);

      this.$slides.width(this.sliderBannerWidth);
      this.bindButtons();

      // $('.-next').on('click', function() {
      //     console.log('test');
      // })
    },

    bindButtons: function() {
      var position = 0;

      $('.arrow.-next').on('click', function() {
        // console.log('slide next');
        var that = this;

        position++;
        if (position == -1) {
          position = that.slideCount - 1;
        }
        console.log('test');
        that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));
      });
    }
  };

  $(document).ready(function() {
    Slider.init();
  });
})(jQuery);

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="slider-banner">
  <a href="#" class="arrow -prev">prev</a>
  <a href="#" class="arrow -next">next</a>
  <div class="slider-items">
    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
      </div>
    </div>
    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
      </div>
    </div>
    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
      </div>
    </div>
  </div>
  <div class="banner-detail">
    <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
  </div>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

Move var that = this; outside of the click function.

(function($) {
  'use strict';

  var Slider = {

    init: function() {

      this.$sliderBanner = $('.slider-banner');
      this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
      this.$slides = $('.slides', this.$sliderItemsWrapper);
      this.$sliderButtons = $('.arrow', this.$sliderBanner);
      this.slideCount = $('.slides', this.$sliderItemsWrapper).length;

      this.sliderBannerWidth = $(this.$sliderBanner).width();
      this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);

      this.$slides.width(this.sliderBannerWidth);
      this.bindButtons();

      // $('.-next').on('click', function() {
      //     console.log('test');
      // })

    },

    bindButtons: function() {
      var position = 0;
      var that = this;
      $('.arrow.-next').on('click', function() {
        // console.log('slide next');


        position++;
        if (position == -1) {
          position = that.slideCount - 1;
        }
        console.log('test');
        that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));

      });

    }

  };

  $(document).ready(function() {

    Slider.init();
  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-banner">
  <a href="#" class="arrow -prev">prev</a>
  <a href="#" class="arrow -next">next</a>
  <div class="slider-items">

    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

      </div>
    </div>

    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

      </div>
    </div>

    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

      </div>
    </div>
  </div>

  <div class="banner-detail">
    <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
  </div>
</div>