Чем заменить столь несовершенную конструкцию?

Question

[vikholodov]

Я - зародыш в jquery, знаю только совсем базовые вещи, написал слайдер из 3х элементов, получился очень костыльный, помогите все неравнодушные тактически грамотно оформить следующий функционал:

$(function(){
		$('.step.first').on('click', function(){
		  if($(this).hasClass('active')){
		  } else {
		  	$('.step').removeClass('active');
		  	$(this).addClass('active');
		  	$('.slide').removeClass('active');
		  	$('.slide.first').addClass('active');
		  }

		});
		$('.step.second').on('click', function(){
		  if($(this).hasClass('active')){
		  } else {
		  	$('.step').removeClass('active');
		  	$(this).addClass('active');
		  	$('.slide').removeClass('active');
		  	$('.slide.second').addClass('active');
		  }

		});
		$('.step.third').on('click', function(){
		  if($(this).hasClass('active')){
		  } else {
		  	$('.step').removeClass('active');
		  	$(this).addClass('active');
		  	$('.slide').removeClass('active');
		  	$('.slide.third').addClass('active');
		  }

		});
	});

Answer 1

[0xD34F]

Установим соответствие между слайдами и кнопками с помощью data-атрибута:

<div class="slide" data-slide="1">1</div>
<div class="slide" data-slide="2">1+1</div>
<div class="slide" data-slide="3">3.0001</div>

<div>
  <span class="step" data-slide="1"></span>
  <span class="step" data-slide="2"></span>
  <span class="step" data-slide="3"></span>
</div>

По клику на кнопку снимаем класс active там, где он есть, добавляем его кликнутой кнопке и слайду, чьё значение data-slide такое же, как у кнопки:

$(document).on('click', '.step', function() {
  $('.step.active, .slide.active').removeClass('active');
  $(this).addClass('active');
  $(`.slide[data-slide="${this.dataset.slide}"]`).addClass('active');
});

// по умолчанию сделаем активным первый слайд
$('.step').eq(0).click();

Comments

[vikholodov]

Невероятно благодарен вам, для меня это хороший урок! Последняя строка правда непонятна мне, попробовал ее удалить и все работает также)