Make image appear/disappear by clicking

Asked

Viewed 316 times

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>

3 answers

3


You can use the method html to add the image and text in HTML format.

Something like that:

$('#service').on('change', function() {
  var value = $(this)
    .children('option:selected')
    .val()

  if (value == 1) {
    $('#valor').html('<img src="https://picsum.photos/50/50/?image=10" /> Preço: R$ 70,00')
  } else if (value == 2) {
    $('#valor').html('<img src="https://picsum.photos/50/50/?image=20" /> Preço: R$ 100,00')
  } else if (value == 3) {
    $('#valor').html('<img src="https://picsum.photos/50/50/?image=30" /> Preço: R$ 120,00')
  } else if (value == 4) {
    $('#valor').html('<img src="https://picsum.photos/50/50/?image=40" /> Preço: R$ 160,00')
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select style="margin: 0 5% 0 13%;" class="border-box-contact" name="service" id="service" required>
  <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 class="valor" id="valor" style="display:flex; position:relative; justify-content:center; margin-top: 5%; margin-bottom:0%; font-weight: bolder; font-size: 15px;"></span>
</p>


You can even reduce the amount of ifs, if you want:

$('#service').on('change', function() {
  // Note que as chaves do objeto a seguir combinam com os valores dos elementos
  // <option> que você criou. Por isso, podemos usar o valor do <select> para
  // acessar a imagem e o preço desejados.
  var options = {
    1: '<img src="https://picsum.photos/50/50/?image=10" /> Preço: R$ 70,00',
    2: '<img src="https://picsum.photos/50/50/?image=20" /> Preço: R$ 100,00',
    3: '<img src="https://picsum.photos/50/50/?image=30" /> Preço: R$ 120,00',
    4: '<img src="https://picsum.photos/50/50/?image=40" /> Preço: R$ 160,00'
  }

  $('#valor').html(options[$(this).val()])
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select style="margin: 0 5% 0 13%;" class="border-box-contact" name="service" id="service" required>
  <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 class="valor" id="valor" style="display:flex; position:relative; justify-content:center; margin-top: 5%; margin-bottom:0%; font-weight: bolder; font-size: 15px;"></span>
</p>


Edit 01:

To make the text stay down below image, just use the following CSS:

.valor img {
  display: block;
}

This will make the image and text lines different. :)

2

You can add a tag img html with a certain id:

<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>
<img src="" id="imagem" /><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>

and change its contents dynamically with jQuery using $(...).attr("src", "caminho/para/imagem"):

$("#service").change(function() {
  var value = $(this).children("option:selected").val();
  if (value == 1) {
    $("#valor").text("Preço: R$ 70,00");
    $("#image").attr("src", "http://placehold.it/100x100");
  } else if (value == 2) {
    $("#valor").text("Preço: R$ 100,00");
    $("#image").attr("src", "http://placehold.it/100x100");
  } else if (value == 3) {
    $("#valor").text("Preço: R$ 120,00");
    $("#image").attr("src", "http://placehold.it/100x100");
  } else if (value == 4) {
    $("#valor").text("Preço: R$ 160,00");
    $("#image").attr("src", "http://placehold.it/100x100");
  }
});
  • And how do I put the price under the image? I use "/n"?

  • 1

    I changed the HTML to leave the image above the price. To leave the price below you need to make a line break with the tag <br> after the image.

2

You can do as the Luiz Felipe placed, this perfect. I would only pass the values via attribute. So if you want to add new elements to the select, no need to change anything in javascript, it is already ready to receive any amount existing on select.

That is, just add or remove a option and the final result will be the same.

$('#service').on('change', function() {
  var value = $(this).children('option:selected')
  $('#valor').html('<img src="'+value.data('imagem')+'" /> Preço: R$ '+value.data('valor')+'')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select style="margin: 0 5% 0 13%;" class="border-box-contact" name="service" id="service" required>
  <option value="" disabled selected>Tamanho</option>
  <option value="1" data-imagem="https://picsum.photos/50/50/?image=10" data-valor="70,00">PP (~1,2kg)</option>
  <option value="2" data-imagem="https://picsum.photos/50/50/?image=20" data-valor="100,00">P (~1,8kg)</option>
  <option value="3" data-imagem="https://picsum.photos/50/50/?image=30" data-valor="120,00">M (~2,5kg)</option>
  <option value="4" data-imagem="https://picsum.photos/50/50/?image=40" data-valor="160,00">G (~3,5kg)</option>
</select>
<br />
<p>
  <span class="valor" id="valor" style="display:flex; position:relative; justify-content:center; margin-top: 5%; margin-bottom:0%; font-weight: bolder; font-size: 15px;"></span>
</p>

  • Mano, ótimo! And how do I put the price under the image? I use "/n"?

  • 1

    Dude you can put a <br/> after the image tag. But I think this example is more of a markup, it’s worth taking a hard look at this part to do something elaborate, with css.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.