I am working on a project where I want to show page contents selectively.
- Have buttons "next" and "previous"
- contents are id-ed in a serial manner.
what I want to achieve is at the first page loading, show the first content(id='item-0') and only show the "next" button since there is no previous content, and when click on "next" button, hide currently showing contents(id='item-0') and show all the contents that are in (id='item-1') and so forth, and do not show the "next" button when it's the last content.
this is what I got so far, on the page I first load every contents with display: none; so, nothing's showing up of course. but I want to be able to show the first content(id="item-0") by changing the style display to inline-block. and then update the "which" that's in the "next" button onclick action to the next id which is id="item-1" and dynamically update this "which" whenever either "next" or "previous" buttons clicked.
// page when first loaded.
<div id="item-0" style="display:none;">
<p>example data</p>
<img src="example.com/img.png">
<video src="abc.com/abc/def.mp4"></video>
</div>
<div id="item-1" style="display:none;">
<img src="example.com/img-5.png">
<video src="abc.com/abc/def.mp4"></video>
<div ><h1>ABCD</h1></div>
</div>
<div id="item-2" style="display:none;">
<p>example data</p>
<p>example data 2</p>
</div>
<a onclick="nextBtn('item-0','item-1')">Next</a>
<a onclick="prevBtn('item-0',null)" style="display:none;">Prev</a>
So far I worked on:
function show_item(which) {
var element = document.getElementById(which)
element.style.display='inline-block';
}
function hide_item(which) {
var element = document.getElementById(which)
element.style.display='none';
}
function nextBtn(current_which, next_which) {
// e.g. current_which = "item-0", next_which = "item-1"
hide_item(current_which);
show_item(next_which);
}
function prevBtn(current_which, prev_which) {
// e.g. current_which = "item-1", prev_which = "item-0"
hide_item(current_which);
show_item(prev_which);
}
what I haven't figured out are:
- how to update the current_which and next_which that go in to the "Next" and "Prev" buttons.
- how to not show "Prev" button when the page is showing the first content, and how to now show "Next" button when the page is showing the last content.
CodePudding user response：
I have prepared something for you. If it is not exactly what you are looking for, I hope it'll you give some general idea on how to achieve what you want.
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var elements = document.getElementsByClassName('container')
//get the currentDiv ID
var currentDiv = 0;
//when next is clicked
next.addEventListener('click',function(){
//we first check if the viewed div is not the last one
if(currentDiv < 2){
//if not we remove the .active class
removeActive(currentDiv);
//increment the ID of the current ID
currentDiv = 1;
//and add .active class to the next DIV
addActive(currentDiv)
}
})
prev.addEventListener('click',function(){
//same thing with prev, we first test if the current div is not the first one
if(currentDiv > 0){
//if not we remove the .active class
removeActive(currentDiv);
//decrement the selected div
currentDiv -= 1;
//and add the .active class
addActive(currentDiv);
}
})
//below are 2 functions that handles the addActive & removeActive if the conditions are passed
function removeActive(currentDiv){
document.getElementById('item-' currentDiv).classList.remove('active');
}
function addActive(currentDiv){
document.getElementById('item-' currentDiv).classList.add('active');
}.container.hide {
display: none;
}
.active {
display: block !important;
}
.btn {
cursor: pointer;
}<div id="item-0">
<p>example data</p>
<h3>Image For Div 1</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Smart-Watch.jpg" width="100px" height="100px"/>
</div>
<div id="item-1">
<p>example data</p>
<h3>Image For Div 2</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Wireless-Phone-Chargers.jpg" width="100px" height="100px"/>
</div>
<div id="item-2">
<p>example data</p>
<h3>Image For Div 3</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Phone-Lenses.jpg" width="100px" height="100px"/>
</div>
<br/><br/><br/>
<a >Prev</a>
<a >Next</a>CodePudding user response：
Here is a slightly more condensed version of a working script:
const btn = document.querySelectorAll('.btn'), // btn[0]: Prev, btn[1]: Next
divs = document.querySelectorAll('.container');
function render(n){
[n,n!==divs.length-1].forEach((c,i)=>btn[i].style.visibility=c?null:"hidden"); // show/hide buttons
divs.forEach((d,i)=>d.classList.toggle("hide",i!==n)); // show/hide divs
}
render(divs.curr=1); // define the starting div
btn.forEach(b => b.onclick = () => {
render( divs.curr = (b.textContent==="Next" ? 1 : -1) );
});.hide { display: none; }
.btn { cursor: pointer; }<div id="item-0">
<p>example data</p>
<h3>Image For Div 1</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Smart-Watch.jpg" width="100px" height="100px" />
</div>
<div id="item-1">
<p>example data</p>
<h3>Image For Div 2</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Wireless-Phone-Chargers.jpg" width="100px" height="100px" />
</div>
<div id="item-2">
<p>example data</p>
<h3>Image For Div 3</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Phone-Lenses.jpg" width="100px" height="100px" />
</div>
<div id="item-3">
<p>example data</p>
<h3>Image For Div 4</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Thumb-224.jpg" height="100px" />
</div>
<div id="item-4">
<p>example data</p>
<h3>Image For Div 5</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Thumb-221.jpg" height="100px" />
</div>
<br/><br/><br/>
<a >Prev</a>
<a >Next</a>I designed the script to have a small footprint, i. e. only a few global variables - or better - constants: btn and divs. In divs.curr you will find the index of the currently "active" div.
This script is also open for changes to the markup: The number of divs can change to any number.