2
I would like the user to click on the button of the "Size" to appear an image of a cake together with the price I already got.
My code is like this:
$("#service").change(function() {
var value = $(this).children("option:selected").val();
if (value == 1) {
$("#valor").text("Preço: R$ 70,00");
//queria add aqui uma imagem caso ele clicasse aqui
} else if (value == 2) {
$("#valor").text("Preço: R$ 100,00");
//queria add aqui uma imagem caso ele clicasse aqui
} else if (value == 3) {
$("#valor").text("Preço: R$ 120,00");
//queria add aqui uma imagem caso ele clicasse aqui
} else if (value == 4) {
$("#valor").text("Preço: R$ 160,00");
//queria add aqui uma imagem caso ele clicasse aqui
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="service" style="margin: 0 5% 0 13%;" name="service" required class="border-box-contact">
<option value="" disabled selected>Tamanho</option>
<option value=1>PP (~1,2kg)</option>
<option value=2>P (~1,8kg)</option>
<option value=3>M (~2,5kg)</option>
<option value=4>G (~3,5kg)</option>
</select>
<br>
<p><span style="display:flex; position:relative; justify-content:center; margin-top: 5%; margin-bottom:0%; font-weight: bolder; font-size: 15px;" id="valor" class="valor"></span></p>
You can change the "style" inside this method?
– Lucas Nascimento Távora
And how do I put the price under the image? I use "/n"?
– Lucas Nascimento Távora
I edited the answer. :)
– Luiz Felipe