点击重新加载脚本

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

});