当数字到达某一数字时，它会返回到以前的数字。
当数字到达某一数字时，它会返回到以前的数字。
提问于 2019-11-26 16:01:09
这就是发生的事情：gif(查看gif以更好地理解)。你可以看到，当数字命中2，它回到1，当它击中4，它回到3.这并不是以有序的方式发生的，从4号到第10位或更高，没有回到以前的数字。我认为这在一定程度上与页面的重新加载有关。有人能解释一下为什么会发生这种事吗？此外，如何更改代码以使其正常工作？
这是完整的代码：
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Carrinho</title>
<script src="https://kit.fontawesome.com/3da1a747b2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Catamaran&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="semantic/dist/semanticModificado.min.css">
<link rel="stylesheet" href="payment.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="cart.css">
<style>
</style>
</head>
<body>
<div class="container" id="navmobile" style="display: none">
<img src="upload\felinefilogo.svg" style="margin-top: 1rem" height="100px" width="250px" alt="">
<img src="upload\felinefi.svg" height="20px" width="62.5px" alt="">
<nav class="navbar" style="padding: 0; margin-right: 16px">
<ul class="nav">
<li><a href="#home">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="contact.php">Contato</a></li>
<li><a href="cart2.php" display="none" class="nav-item nav-link active">
<h5 class="px-5 cart" style="display: flex;">
Carrinho
<span id="cart-item" class="cart-item text-warning bg-light"></span>
<i class="fas fa-shopping-cart fa-flip-horizontal" aria-hidden="true"></i>
</h5>
</a></li>
</li>
</ul>
</nav>
</div>
<nav class="navbar" id="navdesktop">
<div class="container">
<div class="imagem"><img src="upload\felinefihorizontalmedium.svg" height="100px" width="250px" alt="">
</div>
<ul class="nav">
<li><a href="index2.php">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="contact.php">Contato</a></li>
<li><a href="cart2.php" display="none" class="nav-item nav-link active">
<h5 class="px-5 cart" style="display: flex;">
Carrinho
<span id="cart-item" class="cart-item text-warning bg-light"> </span>
<i class="fas fa-shopping-cart fa-flip-horizontal" aria-hidden="true"></i>
</h5>
</a></li>
</li>
</ul>
</div>
</nav>
<section class="section-aPayment">
<div class="containerPayment">
<div class="row" style="flex-wrap:nowrap" !important>
<div class="col-75">
<br>
<h2 class="meuCarrinho">Meu carrinho</h2>
<br>
<form action="">
<?php
require 'config.php';
$stmt = $conn->prepare("SELECT * FROM cart");
$stmt->execute();
$result = $stmt->get_result();
$grand_total = 0;
while ($row = $result->fetch_assoc()) :
?>
<div class="cartContainer">
<div class="sub-container">
<div class="imagem2"><img src="<?= $row['product_image'] ?>" alt=""></div>
<div class="conteudodaDiv">
<div class="title-e-icon">
<h3><?= $row['product_name'] ?></h3> <!-- <button class="icon" name="remove"> --><a href="action.php?remove=<?= $row['id'] ?>"><i class="fas fa-trash-alt"></i></a>
</div>
<p>Ref: <span># D12-9970-014-39</span></p>
<p>Vendido por <a href="index2.php">Felinefi</a> e entregue em até 8 dias úteis. </p>
<p>Frete GRÁTIS</p>
<p>Tamanho: <span>39 </span></p>
<p>Cor: <span>Preto</span> </p>
</div>
</div>
<hr>
<div class="eita">
<h1>Quantidade:
<button type="button" class="ui circular button" id="menos"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-5 -15 39 39">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-12v-2h12v2z" />
</svg></button>
<div class="ui mini icon input focus">
<input class="itemQty" value="<?= $row['qty'] ?>" type="text" style="padding-right: 8px; padding-left: 12px; width: 34px;" minlength="1" disabled="">
<input type="hidden" class="pid" value="<?= $row['id'] ?>">
<input type="hidden" class="pprice" value="<?= $row['product_price'] ?>">
</div>
<button type="button" class="ui circular button" id="mais"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-5 -15 39 39">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" />
</svg></button>
</h1>
<div class="price">
<span>R$ 79.90</span><span>R$ <?= number_format($row['product_price'], 2) ?></span>
</div>
</div>
</div>
</form>
<?php $grand_total += $row['total_price']; ?>
</div>
<div class="col-25">
<br>
<h2>Resumo da compra</h2>
<br>
<div class="containerResumo">
<div class="subCoEsquerda1">
<h3 class="esquerda">Itens</h3>
<h3 class="direita2">(<?= $row['qty'] ?>)</h3>
</div>
<div>
<hr>
</div>
<div class="subCoDireita2">
<h3 class="esquerda">Desconto</h3>
<h3 class="direita2" id="hidethisDiv"> 50% </h3>
</div>
<div>
<hr>
</div>
<div class="subCoEsquerda3">
<h3 class="esquerda">Valor total</h3>
<h3 class="direita2">R$ <?= number_format($grand_total, 2); ?></h3>
</div>
<hr>
<div class="subCoEsquerda4">
<a href="payment2.php"><button class="positive fluid ui button">Continuar</button></a>
</div>
<?php endwhile; ?>
<!-- <h1 class="">The cart is empty</h1> -->
<div class="emptycart <?= ($grand_total >= 1) ? 'hideThis' : 'showThis' ?>">
<div class="emptycartLogo">
<svg data-v-4f460278="" width="100%" height="100%" viewBox="0 0 49 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title data-v-4f460278="">45A0D541-4F15-4397-B2BF-FDEC4E95BD82</title>
<desc data-v-4f460278="">Created with sketchtool.</desc>
<defs data-v-4f460278=""></defs>
<g data-v-4f460278="" id="2019-v2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g data-v-4f460278="" id="Vazio" transform="translate(-696.000000, -112.000000)" stroke="#5A2D82">
<g data-v-4f460278="" id="Ícones-/-Interface-/-Carrinho" transform="translate(689.000000, 102.000000)">
<path data-v-4f460278="" id="Stroke-1" d="M8.23136646,11.5266391 L12.7109627,11.5266391
L23.9470186,42.3026466
L48.5837391,42.3026466 M15.4262547,17.1737669
L54.8276398,17.1737669 L54.8276398,30.1021654
L22.6169068,36.6555188" stroke-width="1.5"></path>
<path data-v-4f460278="" id="Stroke-3" d="M16.6547019,23.3746992 L54.8276398,23.3746992
L16.6547019,23.3746992 Z M31.341,47.0078872 C31.341,48.6126617
30.0257143,49.9090677 28.4054348,49.9090677 C26.7893913,49.9090677
25.4762236,48.6126617 25.4762236,47.0078872 C25.4762236,45.401015
26.7893913,44.104609 28.4054348,44.104609
C30.0257143,44.104609 31.341,45.401015 31.341,47.0078872
L31.341,47.0078872 Z M46.3937143,47.0078872 C46.3937143,48.6126617
45.0805466,49.9090677 43.4602671,49.9090677 C41.8421056,49.9090677
40.5289379,48.6126617 40.5289379,47.0078872 C40.5289379,45.401015
41.8421056,44.104609 43.4602671,44.104609 C45.0805466,44.104609
46.3937143,45.401015 46.3937143,47.0078872 L46.3937143,47.0078872 Z" stroke-width="0.972"></path>
</g>
</g>
</g>
</svg>
</div>
<div class="emptycartTitle">
Seu carrinho está vazio.
</div>
<div class="emptycartTe">
Adicione o produto clicando no botão “Adqurir” na página de produto.
</div>
<div class="emptycartButton">
<button onclick="location.href= 'index2.php'" class="ui grey basic button">VOLTAR PARA A PÁGINA INICIAL</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src=" https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$("input[name='expyear']").mask("00 / 00");
$("input[name='zip']").mask("00000 - 000");
</script>
<script>
//a condição surte efeito quando a página da reload ou aperta f5.
$(document).ready(function() {
if ($(this).width() < 500) {
$('#navdesktop').hide();
$('#navmobile').show();
} else if ($(this).width() > 500) {
$('#navmobile').hide();
$('#navdesktop').show();
}
});
//a condição surte efeito apenas quando mexe na "responsividade" da página.
$(window).resize(function() {
if ($(this).width() < 500) {
$('#navdesktop').hide();
$('#navmobile').show();
} else if ($(this).width() > 500) {
$('#navmobile').hide();
$('#navdesktop').show();
}
});
</script>
<script>
//aumentar e diminuir a quantidade dos itens (respectivamente).
$(function() {
$('#mais').on('click', function() {
var $quantidade = $(this).closest('h1').find('.itemQty');
var currentVal = parseInt($quantidade.val());
if (!isNaN(currentVal)) {
$quantidade.val(currentVal + 1);
$(".itemQty").trigger('change');
}
});
$('#menos').on('click', function() {
var $quantidade = $(this).closest('h1').find('.itemQty');
var currentVal = parseInt($quantidade.val());
if (!isNaN(currentVal) && currentVal > 0) {
$quantidade.val(currentVal - 1);
$(".itemQty").trigger('change');
}
});
});
</script>
<script>
//ajax.
$(document).ready(function() {
$(".itemQty").on('change', function() {
var $el = $(this).closest('div');
var pid = $el.find(".pid").val();
var pprice = $el.find(".pprice").val();
var qty = $el.find(".itemQty").val();
location.reload(true);
$.ajax({
url: 'action.php',
method: 'post',
cache: false,
data: {
qty: qty,
pid: pid,
pprice: pprice,
},
success: function(response) {
console.log(response);
}
});
});
load_cart_item_number();
function load_cart_item_number() {
$.ajax({
url: 'action.php',
method: 'get',
data: {
cartItem: "cart-item"
},
success: function(response) {
$('.cart-item').html(response);
}
});
}
});
</script>
<script type='text/javascript'>
//mostra o conteúdo do carrinho quando a página carrega depois de clicar em "Adicionar ao Carrinho".
window.onload = function() {
if (!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
</script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-26 17:27:57
因为您使用的是h1，所以每次使用ajax重新加载都是事实的来源。要增加数量，有时单击该页时，它仍然没有重新加载，因此它会选择旧的值。
作为一项建议，我将在js中的减号和mais函数之外设置一个变量，以跟踪像这样的当前项的数量(其中条目数来自PHP第一次加载)。
let current = <?= $number_of_items ?>;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59054879
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号