#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
Когда я помещаю #myCart таблицу внутри тела, товары добавляются в корзину, и кнопка удалить также работает
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Boutique</title>
<link rel="icon" href="./img/favicon.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/layout.css">
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Laila" rel="stylesheet">
</head>
<body>
<div class="logoRow">
<div>
<img style="width: 80px" src="./img/logo.png">
</div>
<div class="topSideBar">
<div>
<ul>
<li>Cart</li>
<li id="cart_container">
<div id="cart_counter">0</div>
<div id="cart_button" class="image"></div>
<div id="cart_items">
<h3>Cart</h3>
<div id="cart-container" style="height:300px;">
</div>
</div>
</li>
<li><a href="#">Womens</a></li>
<li><a href="#">Mens</a></li>
<li><a href="#">Boys</a></li>
<li><a href="#">Girls</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Register</a></li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<div class="container">
<p class="item">Soccer Ball</p>
<p class="price">30</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
<div class="container">
<p class="item">Soccer Shoes</p>
<p class="price">80</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
<div class="container">
<p class="item">Soccer Jersey</p>
<p class="price">130</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
</div>
<table id="myCart" border="1">
<tr>
<th>Item Name</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
<th>Remove</th>
</tr>
<tr style="display: none; border-top: 2px solid black;">
<td colspan="3">Subtotal</td>
<td class="right subtotal"></td>
</tr>
</table>
<div class="bottomNav">
<div class="bottomNavContents">
<div>
<a href="/">Home</a>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
<a href="/about-kfc.php">About KFC</a>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
<a href="/contact-us.php">Contact Us</a>amp;nbsp;amp;nbsp;amp;nbsp;
<a href="#">Feedback</a>
</div>
<div class="socialMediaIcons">
<a href="#"><img style="width: 30px; height: 30px;" src="./img/fb-icon.jpg" alt=""></a>
<a href="#"><img style="width: 30px; height: 30px;" src="./img/instagram-icon.png" alt=""></a>
<a href="#"><img style="width: 30px; height: 30px;" src="./img/twitter-icon.png" alt=""></a>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
// ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
$('#cart_counter').animate({ top: '-2px', opacity: 1 }, 500);
$('#cart_button').click(function () {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#cart_items').fadeToggle('fast', 'linear');
return false;
});
// HIDE cart_items WHEN CLICKED ANYWHERE ON THE PAGE.
$(document).click(function () {
$('#cart_items').hide();
});
$('#cart_items').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
$('.add').click(function() {
var itemsNo = parseInt($('.itemsNo').text());
itemsNo = itemsNo 1;
$('.itemsNo').text(itemsNo);
$('#myCart tr:last').show();
var item = $(this).siblings('.item').text();
var price = $(this).siblings('.price').text();
var qty = $(this).siblings('.qty').val();
var total = price * qty;
// to check if item exists in table
if($("td:contains('" item "')").length > 0) {
var lastQty = $("td:contains('" item "')").next().text();
var accumQty = parseInt(lastQty) parseInt(qty);
$("td:contains('" item "')").siblings('.qty2').text(accumQty);
total = price * accumQty;
$("td:contains('" item "')").siblings('.total').text(total);
var sum = 0;
$(".total").each(function() {
var val = parseInt($(this).text());
sum = val;
});
$(".subtotal").text(sum);
} else {
$("#myCart tr:last").before(
"<tr>"
"<td class='item_name'>" item "</td>"
"<td class='qty2'>" qty "</td>"
"<td class='right price2'><span class='currency'>$ </span>" price "</td>"
"<td class='right total'>" total "</td>"
"<td><button class='remItem' onclick='remove()'>X</button></td>"
"</td>"
);
var sum = 0;
$(".total").each(function() {
var val = parseInt($(this).text());
sum = val;
});
$(".subtotal").text(sum);
}
$(this).siblings('.qty').val(1);
});
$(document).on("click", "button.remItem" , function() {
var totalPrice = parseInt($('.subtotal').text()) - parseInt($(this).parent().siblings('.total').text());
$(".subtotal").text(totalPrice);
$(this).parent().parent().remove();
});
});
</script>
</html>
Но когда таблица #myCart помещается в #cart-container, кнопка удалить не работает. Но все добавить в корзину работает. Что вызывает такое поведение?
https://jsfiddle.net/Ldnjf0by/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Boutique</title>
<link rel="icon" href="./img/favicon.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/layout.css">
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Laila" rel="stylesheet">
</head>
<body>
<div class="logoRow">
<div>
<img style="width: 80px" src="./img/logo.png">
</div>
<div class="topSideBar">
<div>
<ul>
<li>Cart</li>
<li id="cart_container">
<div id="cart_counter">0</div>
<div id="cart_button" class="image"></div>
<div id="cart_items">
<h3>Cart</h3>
<div id="cart-container" style="height:300px;">
<table id="myCart" border="1">
<tr>
<th>Item Name</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
<th>Remove</th>
</tr>
<tr style="display: none; border-top: 2px solid black;">
<td colspan="3">Subtotal</td>
<td class="right subtotal"></td>
</tr>
</table>
</div>
</div>
</li>
<li><a href="#">Womens</a></li>
<li><a href="#">Mens</a></li>
<li><a href="#">Boys</a></li>
<li><a href="#">Girls</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Register</a></li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<div class="container">
<p class="item">Soccer Ball</p>
<p class="price">30</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
<div class="container">
<p class="item">Soccer Shoes</p>
<p class="price">80</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
<div class="container">
<p class="item">Soccer Jersey</p>
<p class="price">130</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
</div>
<div class="bottomNav">
<div class="bottomNavContents">
<div>
<a href="/">Home</a>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
<a href="/about-kfc.php">About KFC</a>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
<a href="/contact-us.php">Contact Us</a>amp;nbsp;amp;nbsp;amp;nbsp;
<a href="#">Feedback</a>
</div>
<div class="socialMediaIcons">
<a href="#"><img style="width: 30px; height: 30px;" src="./img/fb-icon.jpg" alt=""></a>
<a href="#"><img style="width: 30px; height: 30px;" src="./img/instagram-icon.png" alt=""></a>
<a href="#"><img style="width: 30px; height: 30px;" src="./img/twitter-icon.png" alt=""></a>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
// ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
$('#cart_counter').animate({ top: '-2px', opacity: 1 }, 500);
$('#cart_button').click(function () {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#cart_items').fadeToggle('fast', 'linear');
return false;
});
// HIDE cart_items WHEN CLICKED ANYWHERE ON THE PAGE.
$(document).click(function () {
$('#cart_items').hide();
});
$('#cart_items').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
$('.add').click(function() {
var itemsNo = parseInt($('.itemsNo').text());
itemsNo = itemsNo 1;
$('.itemsNo').text(itemsNo);
$('#myCart tr:last').show();
var item = $(this).siblings('.item').text();
var price = $(this).siblings('.price').text();
var qty = $(this).siblings('.qty').val();
var total = price * qty;
// to check if item exists in table
if($("td:contains('" item "')").length > 0) {
var lastQty = $("td:contains('" item "')").next().text();
var accumQty = parseInt(lastQty) parseInt(qty);
$("td:contains('" item "')").siblings('.qty2').text(accumQty);
total = price * accumQty;
$("td:contains('" item "')").siblings('.total').text(total);
var sum = 0;
$(".total").each(function() {
var val = parseInt($(this).text());
sum = val;
});
$(".subtotal").text(sum);
} else {
$("#myCart tr:last").before(
"<tr>"
"<td class='item_name'>" item "</td>"
"<td class='qty2'>" qty "</td>"
"<td class='right price2'><span class='currency'>$ </span>" price "</td>"
"<td class='right total'>" total "</td>"
"<td><button class='remItem' onclick='remove()'>X</button></td>"
"</td>"
);
var sum = 0;
$(".total").each(function() {
var val = parseInt($(this).text());
sum = val;
});
$(".subtotal").text(sum);
}
$(this).siblings('.qty').val(1);
});
$(document).on("click", "button.remItem" , function() {
var totalPrice = parseInt($('.subtotal').text()) - parseInt($(this).parent().siblings('.total').text());
$(".subtotal").text(totalPrice);
$(this).parent().parent().remove();
});
});
</script>
</html>
Комментарии:
1. можете ли вы создать скрипку
2. @CognitiveDesire Вот скрипка для кода 1 jsfiddle.net/Ldnjf0by
3. @CognitiveDesire Вот скрипка для кода 2 jsfiddle.net/Ldnjf0by/1
Ответ №1:
Проблема в
$('#cart_items').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
Этот код будет вызываться return false при #cart_items нажатии перед событием кнопки удаления, и это остановит событие удаления из триггера .. [1] удалите return false
[2] Также вместо $(this).parent().parent().remove(); использования $(this).closest('tr').remove()
Примечание: С .remove вам потребуется немного поработать, чтобы проверить, есть ли в списке только один элемент, чтобы также удалить общую строку
Смотрите скрипке
Ответ №2:
удалите onClick из этой строки, поскольку он уже реализован в коде
<td><button class='remItem' onclick='remove()'>X</button></td>
Также, поскольку td добавляются динамически, вывод событий не происходит должным образом. Изменен целевой щелчок, чтобы отобразить событие
Исправлено, проверьте это https://jsfiddle.net/ujf3e42r /
Комментарии:
1. @S.Sandeep добавил новую скрипку