Как сократить или оптимизировать скрипт?

Question

[Иван Медведев]

Привет всем! Есть скрипт, рабочий. Все ок. Но, мне кажется, его можно было би написать как-то короче или правильнее. Если да, то подскажите, как? Задача - переключать шаги с 1 по 3.

Верстка:

<div class="widget_step step_1 active">
			<h3>choose service</h3>
			<ul class="service_list">
				<li class="service_item theme_border">
					<div class="service_info">
						<h4>From widget</h4>
						<ul class="info_list">
							<li class="info_item">From widget</li>
						</ul>
					</div>
					<p class="service_price">&#36;95</p>
				</li>
				<li class="service_item theme_border">
					<div class="service_info">
						<h4>From widget</h4>
						<ul class="info_list">
							<li class="info_item">From widget</li>
						</ul>
					</div>
					<p class="service_price">&#36;100</p>
				</li>
				<li class="service_item theme_border">
					<div class="service_info">
						<h4>From widget</h4>
						<ul class="info_list">
							<li class="info_item">From widget</li>
						</ul>
					</div>
					<p class="service_price">&#36;125</p>
				</li>
			</ul>
		</div>
		<div class="widget_step step_2">
			<h3>your location</h3>
			<ul class="loc_list">
				<li class="loc_item theme_border"><img src="" alt=""><span>From widget</span></li>
			</ul>
		</div>
		<div class="widget_step step_3">
			<h3>Registration</h3>
			<div class="loc_services">
				<h4 class="service_name">Rapid Antigen Test (result in 1 hour)</h4>
				<p class="service_desc">
					Results Within 1 Hour
					Detects SARS-CoV-2 Presence
					Easy & Fast
					Nasal Swab
					FDA Approved
					CLIA-Certified Laboratory
					QR Code
					Fast Turnaround Time
					Results Sent Via Email or SMS
				</p>
				<a class="book register">register now</a>
			</div>
		</div>
		<div class="widget_foot">
			<div class="row row_contacts">
				<div>
					<a href="tel:[phone]" class="phone">1-800-550-2212</a>
					<p class="available">Only Available 7AM - 8PM</p>
				</div>
				<p class="help_text">Need some help?<br>Call us now</p>
			</div>
			<a class="back_btn"></a>
		</div>

Собсна, сам скрипт:

// step 1 -> 2
    $('.service_item, .circle_2').click( function () {
        step_1.removeClass('active');
        step_2.addClass('active');
        step_3.removeClass('active');
        $('.circle_2').addClass('active');
        $('.line_1').addClass('active');
    })
    // step 2 -> 3
    $('.loc_item, .circle_3').click( function () {
        step_2.removeClass('active');
        step_3.addClass('active');
        $('.circle_3').addClass('active');
        $('.line_2').addClass('active');
    })
    $('.circle_3').click( function () {
        step_1.removeClass('active');
        step_2.removeClass('active');
    })
    // back to 1 step
    $('.back_btn, .circle_1').click( function (){
        step_2.removeClass('active');
        step_3.removeClass('active');
        step_1.addClass('active');
        $('.circle_2').removeClass('active');
        $('.circle_3').removeClass('active');
        $('.line_1').removeClass('active');
        $('.line_2').removeClass('active');
    })

Answer 1

[Данил Горев]

Попробуйте забыть о существовании JQuery, думаю это решит все ваши проблемы.

Comments

[Елисей Карамышев]

низкомолекулярный макрос, эта задача в JS решается не сложнее, здесь jQuery не имеет смысла.

[WbICHA]

jQuery все равно будет появляться в вашей жизни в самый неожиданный момент

низкомолекулярный макрос, ага, особенно если ты реакт/вью/ангуляр разработчик.

[WbICHA]

низкомолекулярный макрос, которое есть на всех трёх фреймворках и даже на ваниле.

[WbICHA]

низкомолекулярный макрос, я с таким скролом не работал, но по первой же ссылке в гугле:
https://zwug.github.io/react-full-page/
https://github.com/zwug/react-full-page

Answer 2

[Сергей Соколов]

Если задача на каждом шаге дать active нашим и убрать остальным — для step_X и элементов с классами .circle_X и .line_X.
Тогда можно примерно такую функцию написать:

const setStep = (n) => {
  const ACTIVE = 'active';
  for (let i = 1; i <= 3; i++) {
    const action = i === n ? 'addClass' : 'removeClass';

    this[`step_${i}`][action](ACTIVE);
    $(`circle_${i}`)[action](ACTIVE);
    $(`line_${i}`)[action](ACTIVE);
  }
}

Тут возможны сложности с получением step_X, не известно, в каком контексте они объявлены. Но сам принцип, надеюсь, понятен.

Comments

[Иван Медведев]

Благодарю! Интересный вариант.