Question

我正在制作一个基本的jquery滑块，但我注意到我基本上重复了两次。唯一的区别是var prev和prev方法。并且是第一种方法。

 left.on('click', function(){
  var current = $('.active');
  var prev = current.prev();
   if (prev.length === 0){
    prev = $(".slides").last();
   }

   current.fadeOut(300).removeClass("active");
    prev.fadeIn(300).addClass("active");
 });

right.on('click', function(){
 var current = $('.active');
 var next = current.next();
 if (next.length === 0){
   next = $(".slides").first();
 }
 current.fadeOut(300).removeClass("active");
 next.fadeIn(300).addClass('active');
});

我试过这个功能，但它不起作用。我是初学者，所以我不知道这种功能是否可行。

function slider(x, y){
 var current = $('.active');
 var x = current.x();
 if (x.length === 0){
   x = $(".slides").y();
 }
 current.fadeOut(300).removeClass("active");
 x.fadeIn(300).addClass('active');
}); 
right.on('click', slider("next", "first"));
left.on('click', slider("prev", "last"));

Answer 1

将right.on('click', slider("next", "first"))更改为

right.on('click', function(){
  slider("next", "first");
});

看看是否有效。

Answer 2

您正尝试访问函数中的某些动态值。当你这样做时，你必须使用括号表示法[]。那说current.x和$(".slides").y()不起作用。您可以做的是使用括号（如current[x]和$(".slides")[y]()

）来控制它们

function slider(x, y){
 var current = $('.active');
 var slides = current[x]();
 if (slides.length === 0){
   x = $(".slides")[y]();
 }
 current.fadeOut(300).removeClass("active");
 slides.fadeIn(300).addClass('active');
});

当你正在注册一个会产生错误的函数调用时，你的事件处理也是错误的。您可以为调用创建闭包，也可以预先绑定函数

关闭

right.on('click', () => slider("next", "first"));
left.on('click', () => slider("prev", "last"));

绑定

right.on('click', slider.bind(null, "next", "first"));
left.on('click', slider.bind(null, "prev", "last"));

修复DRY代码帮助javascript？

2 个答案: