0

como puedo optimizar el siguiente script, es un script que funciona pero realmente estoy trabajando de forma estatica o con datos en duros, es posible realizar este script de manera mas eficiente y optimizada donde los "area_x" fueran automaticos del archivo php. Requiero que el botón Buscador pueda esconder los div que no estan selecionados en el select.

$("#Buscador").on('click',function() {  
var area = document.getElementById('area-interes').value;//selecciona el area
var div1 = document.getElementById('sec_1')
var div2 = document.getElementById('sec_2')

var divarea1 = document.getElementById('area_1')
var divarea2 = document.getElementById('area_2')
var divarea3 = document.getElementById('area_3')
var divarea4 = document.getElementById('area_4')


if (area =='area_1'){
    divarea1.style.display = 'block';
    divarea2.style.display = 'none';
    divarea3.style.display = 'none';
    divarea4.style.display = 'none';
}

if (area =='area_2'){
    divarea1.style.display = 'none';
    divarea2.style.display = 'block';
    divarea3.style.display = 'none';
    divarea4.style.display = 'none';
}

if (area =='area_3'){
    divarea1.style.display = 'none';
    divarea2.style.display = 'none';
    divarea3.style.display = 'block';
    divarea4.style.display = 'none';
}

if (area =='area_4'){
    divarea1.style.display = 'none';
    divarea2.style.display = 'none';
    divarea3.style.display = 'none';
    divarea4.style.display = 'block';
}

if (area =='area_0'){
    divarea1.style.display = 'block';
    divarea2.style.display = 'block';
    divarea3.style.display = 'block';
    divarea4.style.display = 'block';
}});
1
  • Te he dejado una respuesta aunque se puede mejorar si enseñas mas parte de tu código e incluso si enseñas tu repositorio porque a primera vista es lo unico que podría hacer Commented el 18 ago. 2022 a las 21:38

2 respuestas 2

0

Para optimizar este codigo yo haria lo siguiente

let divAreas = document.querySelectorAll(".area");

function Foo(nameArea) {
  divAreas.forEach((area) => {
    if (area.value === "area_0") area.style.display = "block";
    area.value === nameArea
      ? (area.style.display = "block")
      : (area.style.display = "none");
  });
}

Foo("area_1");

En vez de crear un identificador para cada div, identificalos todos con un querySelectorAll y tomas el value y dentro de una funcion haces la logica con un forEach y un operador ternario.

0

Uno de los casos, en vez de usar tanto If seria usar un switch

$("#Buscador").on('click',function() {  
    var area = document.getElementById('area-interes').value;//selecciona el area
    var div1 = document.getElementById('sec_1')
    var div2 = document.getElementById('sec_2')
    
    var divarea1 = document.getElementById('area_1')
    var divarea2 = document.getElementById('area_2')
    var divarea3 = document.getElementById('area_3')
    var divarea4 = document.getElementById('area_4')
    
 switch (area) {
    

case 'area_1' :
        divarea1.style.display = 'block';
        divarea2.style.display = 'none';
        divarea3.style.display = 'none';
        divarea4.style.display = 'none';
    
    
    break;
case 'area_2' :
        divarea1.style.display = 'none';
        divarea2.style.display = 'block';
        divarea3.style.display = 'none';
        divarea4.style.display = 'none';
    
    
    break;
case 'area_3' :
        divarea1.style.display = 'none';
        divarea2.style.display = 'none';
        divarea3.style.display = 'block';
        divarea4.style.display = 'none';
    
    
    break;
case 'area_4' :
        divarea1.style.display = 'none';
        divarea2.style.display = 'none';
        divarea3.style.display = 'none';
        divarea4.style.display = 'block';
    
    
    break;
case 'area_0' :
        divarea1.style.display = 'block';
        divarea2.style.display = 'block';
        divarea3.style.display = 'block';
        divarea4.style.display = 'block';
        break;
    }});

Tu Respuesta

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

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