Jump to content

Rewrite jQuery in vanilla js


Rezvitskyq
 Share

Recommended Posts

Hello! There was a need to rewrite the code written with jquery into vanilla js. I have little js code on my site and I see no reason to include a library such as jquery 🙂

$('.progress-wrap .dot').on('click', function () {
	let $this = $(this)
	let stepValue = $this.attr('data-step')

	$this.closest('.progress-wrap').find('.bar').css('width', stepValue + '%')
	$this.siblings('.dot').removeClass('is-current')
	$this.addClass('is-active is-current')
	$this.prevAll('.dot').addClass('is-active')
	$this.nextAll('.dot').removeClass('is-active')

	$('.process-panel-wrap').removeClass('is-active')
	$('.step-title').removeClass('is-active')

	if (stepValue === '0') {
		$('#signup-panel-1, #step-title-1').addClass('is-active')
	} else if (stepValue === '25') {
		$('#signup-panel-2, #step-title-2').addClass('is-active')
	} else if (stepValue === '50') {
		$('#signup-panel-3, #step-title-3').addClass('is-active')
	} else if (stepValue === '75') {
		$('#signup-panel-4, #step-title-4').addClass('is-active')
	} else if (stepValue === '100') {
		$('#signup-panel-5, #step-title-5').addClass('is-active')
	}
})

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...