我正在嘗試使用 JavaScript 制作一個東西，在我點擊一個按鈕的地方，它會顯示下一個 div 和之后的一個以及更多。所以這是一個“下一步”按鈕。有一個“上一個”按鈕也很好。
我已經嘗試了一切，但似乎無法找到解決方案。我真的很感激一些建議或幫助，謝謝！
請問有什么幫助嗎？
<div id="wrapper">
<div class="featured">
<input id="button-next" type="button" value="next"/>
<img src="photos/bookcover/Alluredbyyou.jpg" alt="" srcset="">
<p>ALLURED BY YOU</p>
<span>Lorem text part 1</span>
</div>
<div class="featured2">
<input id="button-next" type="button" value="next"/>
<img src="photos/bookcover/Notyourmarrysue.jpg" alt="" srcset="">
<p>Rebecca Frost</p>
<span>Lorem text part 2</span>
</div>
</div>
<script>
$(document).on('click','#button-next', function() {
$('.featured').removeClass('featured2').next('.featured').addClass('active');
});
</script>
.featured, .featured2 {
float: left;
margin-left: 16%;
margin-top: 4%;
width: 980px;
height: 450px;
background-color: #CFD0CD;
}
.featured img, .featured2 img {
width: 230px;
height: 360px;
margin-top:4%;
margin-left: 5%;
float: left;
}
.featured p, .featured2 p{
float: right;
margin-top: 5%;
margin-bottom: 0%;
margin-right: 51%;
width: 18%;
font-size: 20px;
font-family:'poppins';
text-align: left;
}
.featured span, .featured2 span {
float: right;
margin-top: 0%;
margin-right: 4%;
width: 65%;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
height: 75%;
text-align: left;
word-wrap: break-word;
word-break:normal;
line-height: 30px;
white-space: inherit;
}
#button-next{
color: #000000;
float: right;
font-size: 19px;
border: 3px solid #000000;
padding: 5px 50px;
margin-right: 0%;
margin-top: 0%;
letter-spacing: 1px;
cursor: pointer;
transform: scale(1.0);
transition: ease-in-out 0.5s;
}
#button-next:hover {
transform: scale(0.9);
transition: ease-in-out 0.5s;
}
uj5u.com熱心網友回復：
您需要維護一個 id 變數，以便您可以知道您在幻燈片中的位置。
因此，以資料屬性的形式將 id 添加到您的特色專案中，然后創建一個將 id 變數初始化為 的函式，1然后回傳一個添加為實際偵聽器的新函式。
然后根據 id，您可以顯示/隱藏相關的特色部分，同時禁用/啟用按鈕（現在位于它們自己的單獨部分中）。
// Call `handleClick` which sets ups the initial id
// and then returns a new function that which will
// called whenever a button is clicked on
$(document).on('click', 'button', handleClick());
function handleClick() {
// Initialise the id
let id = 1;
// Get the number of featured items from the DOM
// We'll be using this number to compare against the id
const items = $('.featured').length;
// Utility function to toggle a show class for
// featured item who has a matching data id
function toggleFeatured(id) {
$(`.featured[data-id=${id}]`).toggle('show');
}
// Disables/enables the buttons depending
// on the id
function updateButtons(id) {
$('button').prop('disabled', false);
if (id === 1) {
$('.previous').prop('disabled', true);
}
if (id === items) {
$('.next').prop('disabled', true);
}
}
// This is the function that is returned
// to the listener
return function() {
// It grabs the button class (previous/next)
const cl = $(this).attr('class');
// And depending on which it is first use
// the utility function to toggle (remove) the
// `show` class from the current featured item...
toggleFeatured(id);
// ...increase the id...
if (cl === 'previous' && id > 1) --id;
if (cl === 'next' && id < items) id;
// ...then toggle the `show` on the item that
// matches the new id, and update the buttons
toggleFeatured(id);
updateButtons(id);
}
}.featured { display: none; }
.show { display: block; }
.buttons { margin-bottom: 1em; }
button:hover { cursor: pointer; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
<button class="previous" type="button" disabled>Previous</button>
<button class="next" type="button">Next</button>
</div>
<div id="wrapper">
<div data-id="1" class="featured show">
<img src="https://dummyimage.com/200x100/000/fff">
<p>ALLURED BY YOU</p>
<span>Lorem text part 1</span>
</div>
<div data-id="2" class="featured">
<img src="https://dummyimage.com/200x100/cf5fcf/000000">
<p>Rebecca Frost</p>
<span>Lorem text part 2</span>
</div>
<div data-id="3" class="featured">
<img src="https://dummyimage.com/200x100/cf815f/000000">
<p>Bob Marley</p>
<span>Lorem text part 3</span>
</div>
</div>uj5u.com熱心網友回復：
這是 Vanilla JavaScript 中的一個簡單解決方案
const scrollButtons = document.querySelectorAll('.slide-btn')
const slideItems = Array.apply(
null,
document.querySelectorAll('.slide-item')
)
const getActiveIndex = () => slideItems.findIndex(item => {
return item.classList.contains('active')
})
scrollButtons.forEach(btn => {
btn.addEventListener('click', ({ target }) => {
const activeIndex = getActiveIndex()
slideItems[activeIndex].classList.remove('active')
let newActiveIndex
if (target.id === 'previous') {
newActiveIndex = activeIndex === 0 ? slideItems.length - 1 : activeIndex - 1
} else {
newActiveIndex = activeIndex === slideItems.length - 1 ? 0 : activeIndex 1
}
slideItems[newActiveIndex].classList.add('active')
})
}).featured, .featured2 {
float: left;
margin-left: 16%;
margin-top: 4%;
width: 980px;
height: 450px;
background-color: #CFD0CD;
}
.featured img, .featured2 img {
width: 230px;
height: 360px;
margin-top:4%;
margin-left: 5%;
float: left;
}
.featured p, .featured2 p{
float: right;
margin-top: 5%;
margin-bottom: 0%;
margin-right: 51%;
width: 18%;
font-size: 20px;
font-family:'poppins';
text-align: left;
}
.featured span, .featured2 span {
float: right;
margin-top: 0%;
margin-right: 4%;
width: 65%;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
height: 75%;
text-align: left;
word-wrap: break-word;
word-break:normal;
line-height: 30px;
white-space: inherit;
}
#wrapper div:not(.active) {
display: none;
}
.slide-btn {
color: #000000;
float: right;
font-size: 19px;
border: 3px solid #000000;
padding: 5px 50px;
margin-right: 0%;
margin-top: 0%;
letter-spacing: 1px;
cursor: pointer;
transform: scale(1.0);
transition: ease-in-out 0.5s;
}
.slide-btn:hover {
transform: scale(0.9);
transition: ease-in-out 0.5s;
}<div id="wrapper">
<input class="slide-btn" id="previous" type="button" value="previous"/>
<input class="slide-btn" id="next" type="button" value="next"/>
<div class="featured slide-item active">
<img src="photos/bookcover/Alluredbyyou.jpg" alt="" srcset="">
<p>ALLURED BY YOU</p>
<span>Lorem text part 1</span>
</div>
<div class="featured2 slide-item">
<img src="photos/bookcover/Notyourmarrysue.jpg" alt="" srcset="">
<p>Rebecca Frost</p>
<span>Lorem text part 2</span>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/463880.html
標籤：javascript html jQuery css