Как менять активные элементы?

241

14 сентября 2017, 18:57

Как добавлять активный класс к элементам по клику на кнопки nav-prev и nav-next? Проблема с моим скриптом такова: Если активный первый элемент и нажать на кнопку nav-prev,то класс пропадет и также с последним элементом, если он активный и нажать на nav-next,то активный класс пропадет. Как можно это исправить?

$(".nav-prev").click(function() { 
  $(".elem.active").removeClass("active").prev().addClass("active"); 
}); 
 
$(".nav-next").click(function() { 
  $(".elem.active").removeClass("active").next().addClass("active"); 
});

.wrapper { 
  display: flex; 
} 
 
.elem { 
  width: 100px; 
  height: 100px; 
  background: yellow; 
  margin-right: 10px; 
} 
 
.elem.active { 
  background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
  <div class="elem">1</div> 
  <div class="elem">2</div> 
  <div class="elem active">3</div> 
  <div class="elem">4</div> 
  <div class="elem">5</div> 
</div> 
<button class="nav-prev">prev</button> 
<button class="nav-next">next</button>

Answer 1

Нужно ограничить переключение для первого и последнего слайдов, предварительно определив кол-во слайдов:

var slides = $('.wrapper .elem').length; // количество слайдов 
 
$(".nav-prev").click(function() { 
  var active = $(".elem.active"); 
  if (active.index() !== 0) { // если слайд не первый 
    active.removeClass("active").prev().addClass("active"); 
  } 
}); 
 
$(".nav-next").click(function() { 
  var active = $(".elem.active"); 
  if (active.index() !== slides - 1) { // если слайд не последний 
    active.removeClass("active").next().addClass("active"); 
  } 
});

.wrapper { 
  display: flex; 
} 
 
.elem { 
  width: 100px; 
  height: 100px; 
  background: yellow; 
  margin-right: 10px; 
} 
 
.elem.active { 
  background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
  <div class="elem">1</div> 
  <div class="elem">2</div> 
  <div class="elem active">3</div> 
  <div class="elem">4</div> 
  <div class="elem">5</div> 
</div> 
<button class="nav-prev">prev</button> 
<button class="nav-next">next</button>