我希望在单击按钮并且该项目已添加到购物篮后，它会自动转到页面的购物篮部分，但我不太知道如何在不弄乱其余 JavaScript 的情况下对此进行编码按钮的代码已经存在。任何代码片段将不胜感激。<!DOCTYPE html><html><head> </head><body><header class="main-header"> <nav class="main-nav nav"> </nav></header> <div class="shop-items"> <div class="shop-item"> <span class="shop-item-title">Album 0</span> <div class="shop-item-details"><span class="shop-item-price">£12.50</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button> </div> <div class="shop-item"> <span class="shop-item-title">Album 2</span> <div class="shop-item-details"> <span class="shop-item-price">£14.50</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button> </div> <div class="shop-item"> <span class="shop-item-title">Album 4</span> <div class="shop-item-details"><span class="shop-item-price">£19.50</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button> </div> </div></section> <div class="shop-items"> <div class="shop-item"> <span class="shop-item-title">Album 6</span> <div class="shop-item-details"><span class="shop-item-price">£19.50</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button> </div> <div class="shop-items"> <div class="shop-item"> <span class="shop-item-title">Album 8</span> <div class="shop-item-details"><span class="shop-item-price">£19.50</span> <button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button> </div>
2 回答
炎炎设计
TA贡献1808条经验 获得超4个赞
您的意思是平滑滚动到该元素吗？
您可以使用scrollIntoView()：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header class="main-header">
<nav class="main-nav nav">
</nav>
</header>
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">Album 0</span>
<div class="shop-item-details">
<span class="shop-item-price">£12.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
<div class="shop-item">
<span class="shop-item-title">Album 2</span>
<div class="shop-item-details">
<span class="shop-item-price">£14.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
<div class="shop-item">
<span class="shop-item-title">Album 4</span>
<div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
</div>
</section>
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">Album 6</span>
<div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">Album 8</span>
<div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
</div>
</section>
<section class="container content-section">
<h2 class="section-header">Basket</h2>
<div class="cart-row">
<span class="cart-item cart-header cart-column">ITEM</span>
<span class="cart-price cart-header cart-column">PRICE</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
</div>
<p></p>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">£0</span>
</div>
<button class="btn btn-primary btn-purchase" type="button">CHECKOUT</button>
</section>
<script>
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('shop-item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}
function purchaseClicked() {
alert('Thank you for your purchase')
var cartItems = document.getElementsByClassName('cart-items')[0]
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
addItemToCart(title, price)
updateCartTotal()
}
function addItemToCart(title, price) {
var cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert('This item is already added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-item cart-column">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged);
document.getElementsByClassName('btn-purchase')[0].scrollIntoView({ block: 'end', behavior: 'smooth' });
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('£', ''))
var quantity = quantityElement.value
total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.getElementsByClassName('cart-total-price')[0].innerText = '£' + total.toFixed(2)
}
</script>
</body>
</html>
www说
TA贡献1775条经验 获得超8个赞
您可以使用 document.getElementById('yourbasket').scrollIntoView();
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('shop-item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}
function purchaseClicked() {
alert('Thank you for your purchase')
var cartItems = document.getElementsByClassName('cart-items')[0]
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
addItemToCart(title, price)
updateCartTotal()
}
function addItemToCart(title, price) {
var cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert('This item is already added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-item cart-column">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
document.getElementById('yourbasket').scrollIntoView();
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('£', ''))
var quantity = quantityElement.value
total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.getElementsByClassName('cart-total-price')[0].innerText = '£' + total.toFixed(2)
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header class="main-header">
<nav class="main-nav nav">
</nav>
</header>
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">Album 0</span>
<div class="shop-item-details">
<span class="shop-item-price">£12.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
<div class="shop-item">
<span class="shop-item-title">Album 2</span>
<div class="shop-item-details">
<span class="shop-item-price">£14.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
<div class="shop-item">
<span class="shop-item-title">Album 4</span>
<div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
</div>
</section>
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">Album 6</span>
<div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">Album 8</span>
<div class="shop-item-details">
<span class="shop-item-price">£19.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO BASKET</button>
</div>
</div>
</section>
<section id="yourbasket" class="container content-section">
<h2 class="section-header">Basket</h2>
<div class="cart-row">
<span class="cart-item cart-header cart-column">ITEM</span>
<span class="cart-price cart-header cart-column">PRICE</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
</div>
<p></p>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">£0</span>
</div>
<button class="btn btn-primary btn-purchase" type="button">CHECKOUT</button>
</section>
</body>
</html>
- 2 回答
- 0 关注
- 46 浏览
添加回答
举报
0/150
提交
取消