Reputation: 154
I created a function slider that fades the next section in and out, but not happy how I created the functions as I need to change the function each time I create a new section.
There a way to change this setup where only one function is needed so I can have 100 sections and just one function? Not 100 functions for each section to add/remove classes?
$('#toSlide-2').on('click', function (event) {
event.preventDefault();
$('#slide-1').removeClass('in-view').addClass('out-of-view');
$('#slide-2').addClass('in-view');
})
$('#toSlide-3').on('click', function (event) {
event.preventDefault();
$('#slide-2').removeClass('in-view').addClass('out-of-view');
$('#slide-3').addClass('in-view');
})
$('#toSlide-4').on('click', function (event) {
event.preventDefault();
$('#slide-3').removeClass('in-view').addClass('out-of-view');
$('#slide-4').addClass('in-view');
})
.out-of-view{
opacity:0;
}
.in-view{
opacity:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view">
<h2>form 1</h2>
<button id="toSlide-2">button</button>
</form>
<form id="slide-2" class="out-of-view">
<h2>form 2</h2>
<button id="toSlide-3">button</button>
</form>
<form id="slide-3" class="out-of-view">
<h2>form 3</h2>
<button id="toSlide-4">button</button>
</form>
<form id="slide-4" class="out-of-view">
<h2>form 4 - done</h2>
</form>
Upvotes: 1
Views: 251
Reputation: 8610
Here is a pure JS function that will dynamically take the elements using a class selector and iterate over them and use the key word this
in an event listener to select the next element sibling and add/remove class names.
Note: I added a class named forms
and use that to get the element list of forms to use in the forEach loop.
Also, I suggest using display: none/block
instead of opacity
. This will keep the elements from pushing down the page with each iteration of selecting a button.
// get your element list
const forms = document.querySelectorAll(".forms");
// iterate over the element list using forEach()
forms.forEach(function(v){
// foreach value in the list, set a click event listener
v.addEventListener('click', function(e){
e.preventDefault();
// now use the key word 'this' to add/remove class names
// then target the next sibling in the list to add/remove class names
this.classList.remove("in-view");
this.classList.add("out-of-view");
this.nextElementSibling.classList.remove('out-of-view');
this.nextElementSibling.classList.add('in-view');
})
})
.out-of-view{
display:none;
}
.in-view{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view forms">
<h2>form 1</h2>
<button id="toSlide-2">button</button>
</form>
<form id="slide-2" class="out-of-view forms">
<h2>form 2</h2>
<button id="toSlide-3">button</button>
</form>
<form id="slide-3" class="out-of-view forms">
<h2>form 3</h2>
<button id="toSlide-4">button</button>
</form>
<form id="slide-4" class="out-of-view forms">
<h2>form 4 - done</h2>
</form>
JQuery Version:
No matter how many form elements in your HTML, as long as they have the class forms
, they will be iterated over and processed in the function.
Also, use less lines of code and change the css directly in your JQuery using .css()
// get your element list
const $forms = $(".forms");
// iterate over the element list using.each()
$forms.each(function() {
// use $(this) to define the element being clicked on
$(this).click(function(e) {
e.preventDefault();
$(this).css('display', 'none');
$(this).next().css('display', 'block');
})
})
.out-of-view {
display: none;
}
.in-view {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view forms">
<h2>form 1</h2>
<button id="toSlide-2">button</button>
</form>
<form id="slide-2" class="out-of-view forms">
<h2>form 2</h2>
<button id="toSlide-3">button</button>
</form>
<form id="slide-3" class="out-of-view forms">
<h2>form 3</h2>
<button id="toSlide-4">button</button>
</form>
<form id="slide-4" class="out-of-view forms">
<h2>form 4 - done</h2>
</form>
Upvotes: 1
Reputation: 1578
This is a simplified version of a working solution using jQuery.
$('.buttons').on('click', function (event) {
event.preventDefault();
$(this).parent().removeClass('in-view').addClass('out-of-view');
$(this).parent().next().addClass('in-view');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view">
<h2>form 1</h2>
<button class="buttons">button</button>
</form>
<form id="slide-2" class="out-of-view">
<h2>form 2</h2>
<button class="buttons">button</button>
</form>
<form id="slide-3" class="out-of-view">
<h2>form 3</h2>
<button class="buttons">button</button>
</form>
Upvotes: 1
Reputation: 1382
you can use the data attribute to determine which element id would be showed next like so:
function init() {
$('.in-view').show();
$('.out-of-view').hide();
}
function slide(slideId1, slideId2) {
$(`#${slideId1}`).hide();
$(`#${slideId2}`).show();
}
$('.slide-btn').on('click', function (event) {
event.preventDefault();
slide($(this).parent().attr("id"), $(this).data("next"));
});
init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="slide-1" class="in-view">
<h2>form 1</h2>
<button class="slide-btn" data-next="slide-2">button</button>
</form>
<form id="slide-2" class="out-of-view">
<h2>form 2</h2>
<button class="slide-btn" data-next="slide-3">button</button>
</form>
<form id="slide-3" class="out-of-view">
<h2>form 3</h2>
<button class="slide-btn" data-next="slide-4">button</button>
</form>
<form id="slide-4" class="out-of-view">
<h2>form 4 - done</h2>
</form>
Upvotes: 1