点击

Question

我尝试将相互作用添加到我的滑块How to add a class to previous div

脚本的第一部分负责更改clases。如果你把当前的类放到另一个div中，它之前的div将得到.prv，当前的div将得到.nxt

但现在，当我将click功能添加到按钮（下一个）以删除当前类时，clases .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');
});

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

});