修復DRY代碼幫助javascript？

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'); 
}); 

而且你的事件處理是錯誤的點擊您註冊一個函數調用，這將產生一個錯誤括號acccess他們。你可以創建用於該呼叫或預結合的功能

封閉

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"));