點擊重新加載腳本

Question

我嘗試添加交互到我的滑塊How to add a class to previous div

腳本的第一部分負責更改類。如果將當前類放到另一個div中，則前面的div將會變爲.prv，而當前div後面的div將變爲.nxt

但是現在，當我將按鈕功能添加到按鈕（下一個）以刪除當前類時， .nxt和.prv仍然存在，它們應該消失。請檢查小提琴：https://fiddle.jshell.net/df9ef0hf/12/

<div class="next">next</div> 
<div class="previous">prev</div> 

<div class="main-slider"> 

    <div class="slide current"></div> 
    <div class="slide "></div> 
    <div class="slide " ></div> 
    <div class="slide "></div> 
    <div class="slide "></div> 

</div> 

爲

$(".main-slider").ready(function(){ 
    $(".current").prev().addClass("prv"); 
    $(".current").next().addClass("nxt"); 
    if(! $(".current + div").length) $('.slide').first().addClass("nxt"); // current is last 
    if(! $(".current").prev().length) $('.slide').last().addClass("prv") // current is firs 
}); 




$('.next').click(function() { 
    $('.current').removeClass('current'); 
}); 

UPDATE /工作撥弄 https://fiddle.jshell.net/df9ef0hf/15/

Answer 1

你不重新分配當前類，因此腳本不知道什麼是當前對象是。試試這個：

var update = function() { 

$(".current").prev().addClass("prv"); 
    $(".current").next().addClass("nxt"); 
    if(! $(".current + div").length) $('.slide').first().addClass("nxt"); // current is last 
    if(! $(".current").prev().length) $('.slide').last().addClass("prv") // current is firs 

}; 

$(".main-slider").ready(function(){ 

    update(); 

}); 


$('.next').click(function() { 

    $('.current').removeClass('current'); 
    $(".nxt").addClass("current").removeClass("nxt"); 

    update(); 

});