用于删除项目的代码已经构建并且可以正常运行（我通过数据库删除了该项目，还没有使用remove button-icon进行删除），此外，我想做的只是在其中显示一条消息从购物车中取出商品时说“购物车是空的” ...我可以用jquery做到这一点，但是如果我用jquery这样做，则可能会破坏php代码。我想不出办法。我想在cart中没有任何项目时显示“购物车是空的”（看图片），换句话说，当变量为true时如何显示div？我试图用这样的东西来做。这段代码在while循环中：
<?php $grand_total += $row['total_price']; ?>
<h1 class="<?= ($grand_total > 1) ? "class='hideThis'" : "class='showThis'" ?>">The cart is empty</h1>
这是完整的代码：
<!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>
.hideThis {
visibility: hidden;
}
.showThis {
visibility: visible;
}
</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="qty" value="<?= $row['qty'] ?>" type="text" style="padding-right: 8px; padding-left: 12px; width: 34px;" maxlength="1" disabled="">
</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']; ?>
<h1 class="<?= ($grand_total > 1) ? "class='hideThis'" : "class='showThis'" ?>">The cart is empty</h1>
</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="payment.php"><button class="positive fluid ui button">Continuar</button></a>
</div>
<?php endwhile; ?>
</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 $qty = $(this).closest('h1').find('.qty');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
}
});
$('#menos').on('click', function() {
var $qty = $(this).closest('h1').find('.qty');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
}
});
});
</script>
<script>
//ajax.
$(document).ready(function() {
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>
答案 0 :(得分：0)
您已经很接近了，但是您所拥有的会在其他class属性的内部（内部）放置一个class=。
尝试以下方法：
<h1 class="<?= ($grand_total > 1) ? 'hideThis' : 'showThis' ?>">The cart is empty</h1>