OOP with jQuery and Babel

Question

我正在尝试按照OOP原则制动一些jQuery代码。代码部分工作。addCss(( 方法有效，moveRight(( 不起作用。

.HTML

<div class="_slider">
<a href="#" class="_slider_next">&#10095;</a>
<a href="#" class="_slider_prev">&#10094;</a>
<ul>
<li>SLIDE 1</li>
<li>SLIDE 2</li>
<li>SLIDE 3</li>
<li>SLIDE 4</li>
</ul>  
</div>

.JS

import $ from 'jquery';
class Carousel {    
constructor() {
this.slider = $("._slider");
this.sliderUl = $("._slider ul");
this.next = $("_slider_next");
this.sliderLastCh = $("._slider ul li:last-child");
this.sliderFirstCh = $("._slider ul li:first-child");
this.slideCount = $("._slider ul li").length;
this.slideWidth = $("._slider ul li").width();
this.slideHeight = $("._slider ul li").height();
this.sliderUlWidth = this.slideCount * this.slideWidth;
this.events();
}
events() {
$(document).ready(this.addCss.bind(this));
this.next.click(this.moveRight.bind(this));
$(document).ready(
setInterval(function () {
this.moveRight;
}, 3000)
);
}
addCss() {        
this.slider.css({ width: this.slideWidth, height: this.slideHeight });     
this.sliderUl.css({ width: this.sliderUlWidth, marginLeft: - this.slideWidth });     
this.sliderLastCh.prependTo(this.sliderUl);
}
moveRight() {
this.sliderUl.animate({
left: - this.slideWidth
}, 200, function () {
this.sliderFirstCh.appendTo(this.sliderUl);
this.sliderUl.css('left', '');
});
};

}

export default Carousel;

幻灯片应该在单击时自动更改。

Answer 1

这里有几个问题。不过，最普遍的问题与this的范围有关。在函数体本身中，这很好。然而，在setInterval()和animate()回调，作用域是window，而不是当前类。因此，您需要将this的范围缓存在所需级别的变量中，然后在这些回调中使用它。在下面的示例中，我使用了_this.

此外，两个 document.ready 处理程序可以组合，您需要将第二个 document.ready 中的逻辑包装在一个匿名函数中，并且您需要将()放在this.moveRight之后才能实际调用该函数。

综上所述，请尝试以下操作：

class Carousel {
constructor() {
this.slider = $("._slider");
this.sliderUl = $("._slider ul");
this.next = $("._slider_next");
this.sliderLastCh = $("._slider ul li:last");
this.sliderFirstCh = $("._slider ul li:first");
this.slideCount = $("._slider ul li").length;
this.slideWidth = $("._slider ul li").width();
this.slideHeight = $("._slider ul li").height();
this.sliderUlWidth = this.slideCount * this.slideWidth;
this.events();
}
events() {
var classScope = this;    
this.next.click(this.moveRight.bind(this));
$(document).ready(function() {
classScope.addCss();

setInterval(function() {
classScope.moveRight();
}, 3000)
});
}
addCss() {
this.slider.css({
width: this.slideWidth,
height: this.slideHeight
});

this.sliderUl.css({
width: this.sliderUlWidth,
marginLeft: -this.slideWidth
});

this.sliderLastCh.prependTo(this.sliderUl);
}
moveRight() {    
var classScope = this;    

this.sliderUl.animate({
left: -this.slideWidth
}, 200, function() {
console.log('slide moved right...');
classScope.sliderFirstCh.appendTo(classScope.sliderUl);
classScope.sliderUl.css('left', '');
});
};
}
var c = new Carousel();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="_slider">
<a href="#" class="_slider_next">&#10095;</a>
<a href="#" class="_slider_prev">&#10094;</a>
<ul>
<li>SLIDE 1</li>
<li>SLIDE 2</li>
<li>SLIDE 3</li>
<li>SLIDE 4</li>
</ul>
</div>