javascript - 单击重新加载脚本

Question

我尝试向我的 slider 添加交互 How to add a class to previous div

脚本的第一部分负责改变类。如果你把当前类放到另一个div，它之前的div会得到.prv，current之后的div会得到.nxt

但是现在，当我将单击功能添加到按钮(下一个)以删除当前类时，classes .nxt 和 .prv 仍然存在，它们应该消失。请检查 fiddle :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');
});

更新/工作 fiddle 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();

});