1

Tengo el siguiente código, el cual muestra u oculta elementos de un html dependiendo del valor que se seleccione

HTML:

<div>
 <h3>Select Apples</h3>
<div>
<select id="apples" onchange="applenum()">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
 </select>

JS:

function applenum() {
let apples = $("apples").val();
if (apples == "0") {
    $('#apple1').hide();
    $('#apple2').hide();
    $('#apple3').hide();
    $('#apple4').hide();
    $('#apple5').hide();
} else if (apples == "1") {
    $('#apple1').show();
    $('#apple2').hide();
    $('#apple3').hide();
    $('#apple4').hide();
    $('#apple5').hide();
} else if (apples == "2") {
    $('#apple1').show();
    $('#apple2').show();
    $('#apple3').hide();
    $('#apple4').hide();
    $('#apple5').hide();
}
}

¿Cómo puedo reducir el código con un bucle? ya que el número se incrementaría considerablemente dependiendo de la selección

1 respuesta 1

1

Teniendo en cuenta que el valor del select #apples indica "hasta" que #apple[X] hay que mostrar, podrías simplificar tu código así:

Ejemplo:

function applenum() {
  let apples = parseInt($("#apples").val());
  for (let i = 1; i <= 5; i++) {
    $('#apple' + i)[i <= apples ? 'show' : 'hide']();
  }
}
$('apples').on('change', applenum);
applenum();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Select Apples</h3>
<div>
  <select id="apples" onchange="applenum()">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>
<div id="apple1">Apple 1</div>
<div id="apple2">Apple 2</div>
<div id="apple3">Apple 3</div>
<div id="apple4">Apple 4</div>
<div id="apple5">Apple 5</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.