I would like a help, it is a project that would be a pizzeria site, where when the person entered the site did not appear all the "menus" or "classes" at a time, when you enter only the menu would appear, choose which pizzas the person would want to appear in the delivery part and so on. I also needed to calculate the value of each pizza automatically when the quantity was selected and the subtotal appeared in the footer. Thanks so much to anyone who can help.
$('.irEntrega').click(function(){
$('.entrega').show();
$('.cardapio').hide();
});
$('.qtd').change(function () {
var total = 0;
var clicado = $(this);
$('.qtd').each(function () {
var $cada_um = $(this);
var valor = Number($cada_um.parent().find('.valor').html());
var qtd = $cada_um.val();
total += valor * qtd;
});
$('.final').html(total);
});
.etapa {
display: none;
}
.ativa {
display: block;
}
.pizza {
width: 25%;
float: left;
padding: 1%;
}
.qtd{
width: 30px;
height: 30px;
}
.pizza img{
width: 100%;
}
.painel_nav{
clear: both;
}
header{
background-image: url("../imgs/back.jpg");
height: 110px;
}
footer{
width: 100%;
position: fixed;
bottom: 0;
background-color: lightcoral;
font-size: 3em;
}
<!DOCTYPE html>
<html lang ="pt-br">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/geral.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="conteudo">
<div class="etapas cardapio">
<h3>Cardapio</h3>
<div class="pizza">
<h4>nome pizza</h4>
<img src="http://placehold.it/350x150">Quantidade:<inputclass="qtd" type ="number" value="0" max="5" min="0"> nome pizza</input>
</div>
<div class="pizza">
<h4>nome pizza</h4>
<img src="http://placehold.it/350x150">Quantidade:<inputclass="qtd" type ="number" value="0" max="5" min="0"> nome pizza</input>
</div>
<! -- itens -->
<div class="painel_nav">
<button class="irEntrega">Avançar</button>
</div>
</div>
<div class="etapas entrega">
<h3>Entrega</h3>
<! -- formulario de entrega -->
<form id="Endereco">
<label for="nome">Nome do Cliente:</label>
<input name="nome" id="nome" type="text"><br />
<label for="cpf">Rua:</label>
<input name="rua" id="rua" type="text"><br />
<label for="email">Complemento:</label>
<input name="complemento" id="complemento" type="text"><br />
<label for="senha">Bairro:</label>
<input name="bairro" id="bairro" type="text" /><br />
<label for="senha">CEP:</label>
<input name="cep" id="cep" type="number" max="10" min="0" /><br />
<br />
</form>
<div class="painel_nav">
<button class="irPagamento">Informação de Pagamento</button>
</div>
</div>
<div class="etapas pagamento">
<h3>Pagamento</h3>
<p>asdasdsadsasadsadsadsasasadsasasasasadsaa</p>
<! -- formulario de pagamento -->
</div>
<div class="etapas stiuacao">
<h3>Situação</h3>
<! -- mensagens bonitas de agradecimentos e CONTATO -->
</div>
<footer>
valor: <span class="final">0,00</span>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="js/geral.js"></script>
</body>
</html>