0

espero puedan ayudarme a como se debe de simplificar algunas acciones en jquery. Este esmi ejemplo https://codepen.io/critter236/pen/NEVgPW.

Hace lo que quiero, pero creo que se puede simplificar, pensaría que es lo correcto.

Del ejemplo que puse esta seria la parte :

$("#div-prueba-1").on('click', function () {
        $("#div-prueba-1").toggleClass("show");
        $("#div-prueba-2").toggleClass("hide");
        $("#div-prueba-3").toggleClass("hide");
        $("#div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-2").on('click', function () {
        $("#div-prueba-2").toggleClass("show");
        $("#div-prueba-1").toggleClass("hide");
        $("#div-prueba-3").toggleClass("hide");
        $("#div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-3").on('click', function () {
        $("#div-prueba-3").toggleClass("show");
        $("#div-prueba-1").toggleClass("hide");
        $("#div-prueba-2").toggleClass("hide");
        $("#div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-4").on('click', function () {
        $("#div-prueba-4").toggleClass("show");
        $("#div-prueba-1").toggleClass("hide");
        $("#div-prueba-2").toggleClass("hide");
        $("#div-prueba-3").toggleClass("hide");
    });

$("#div-prueba-1").on('click', function() {
  $("#div-prueba-1").toggleClass("show");
  $("#div-prueba-2").toggleClass("hide");
  $("#div-prueba-3").toggleClass("hide");
  $("#div-prueba-4").toggleClass("hide");
});
$("#div-prueba-2").on('click', function() {
  $("#div-prueba-2").toggleClass("show");
  $("#div-prueba-1").toggleClass("hide");
  $("#div-prueba-3").toggleClass("hide");
  $("#div-prueba-4").toggleClass("hide");
});
$("#div-prueba-3").on('click', function() {
  $("#div-prueba-3").toggleClass("show");
  $("#div-prueba-1").toggleClass("hide");
  $("#div-prueba-2").toggleClass("hide");
  $("#div-prueba-4").toggleClass("hide");
});
$("#div-prueba-4").on('click', function() {
  $("#div-prueba-4").toggleClass("show");
  $("#div-prueba-1").toggleClass("hide");
  $("#div-prueba-2").toggleClass("hide");
  $("#div-prueba-3").toggleClass("hide");
});
.box-general {
  background-color: #f4f4f4;
  width: 100%;
  height: 100vh;
  position: relative;
}

.box-general .box-cont {
  transition: all 0.6s linear;
  width: 25%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.box-general .box-cont.show {
  width: 100%;
  left: 0;
}

.box-general .box-cont.hide {
  visibility: hidden;
  opacity: 0;
}

.box-general>div:first-child {
  background-color: #cccccc;
  left: 0;
}

.box-general>div:nth-child(2) {
  background-color: #999999;
  left: 25%;
}

.box-general>div:nth-child(3) {
  background-color: #666666;
  left: 50%;
}

.box-general>div:last-child {
  background-color: #333333;
  left: 75%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-general">
  <div id="div-prueba-1" class="box-cont">
    <div class="box-display"></div>
    <div class="cont-inter">
      Contenido
    </div>
  </div>
  <div id="div-prueba-2" class="box-cont">
    perro 2
  </div>
  <div id="div-prueba-3" class="box-cont">
    perro 3
  </div>
  <div id="div-prueba-4" class="box-cont">
    perro 4
  </div>
</div>

3
  • 1
    Deberias de copiar tu codigo aqui. Ademas especifica que es lo que quieres simplificar.
    – alanfcm
    Commented el 13 dic. 2018 a las 21:49
  • La idea es simplificar la parte que hace que se muestre cada elemento y esconda a los demas.
    – Critter236
    Commented el 13 dic. 2018 a las 22:02
  • el ícono de [<>] es casi como codepen, ahí te lo incluí Commented el 13 dic. 2018 a las 22:10

3 respuestas 3

3

Usando la clase en vez del ID, mostrar el del click y ocultando los hermanos

$(".box-cont").on('click', function() {
  $(this).toggleClass("show");
  $(this).siblings().toggleClass("hide");
});
.box-general {
  background-color: #f4f4f4;
  width: 100%;
  height: 100vh;
  position: relative;
}

.box-general .box-cont {
  transition: all 0.6s linear;
  width: 25%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.box-general .box-cont.show {
  width: 100%;
  left: 0;
}

.box-general .box-cont.hide {
  visibility: hidden;
  opacity: 0;
}

.box-general>div:first-child {
  background-color: #cccccc;
  left: 0;
}

.box-general>div:nth-child(2) {
  background-color: #999999;
  left: 25%;
}

.box-general>div:nth-child(3) {
  background-color: #666666;
  left: 50%;
}

.box-general>div:last-child {
  background-color: #333333;
  left: 75%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-general">
  <div id="div-prueba-1" class="box-cont">
    <div class="box-display"></div>
    <div class="cont-inter">
      Contenido
    </div>
  </div>
  <div id="div-prueba-2" class="box-cont">
    perro 2
  </div>
  <div id="div-prueba-3" class="box-cont">
    perro 3
  </div>
  <div id="div-prueba-4" class="box-cont">
    perro 4
  </div>
</div>

1
  • 1
    Excelente respuesta solo reduciría/optimizaría el código a una linea aprovechando que ambas lineas crean un objeto jQuery a partir de this quedando asi: $(this).toggleClass("show").siblings().toggleClass("hide");
    – nerdcoder
    Commented el 13 dic. 2018 a las 23:17
1

Te aconsejo que le pongas una clase a todos tus elementos. Llamemosla : "clase_divs"

Si juegas simplemente con el hecho de que si no tienen la clase "hide" se entiende que no estan ocultos, podrías simplificarlo aún mas:

$(document).ready(function(){
  $(".clase_divs").on('click', function () {
      var id = $(this).attr('id');
      var num = id.substr(id.length - 1);
      $(".clase_divs").addClass("hide");
      $("#div-prueba-"+num).removeClass("hide");
  });
});
.hide {
  display:none;
}

.clase_divs{
border:1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="clase_divs" id="div-prueba-1">div 1</div>
<div class="clase_divs" id="div-prueba-2">div 2</div>
<div class="clase_divs" id="div-prueba-3">div 3</div>
<div class="clase_divs" id="div-prueba-4">div 4</div>

Y si juegas con el método filter:

$(document).ready(function(){
  $(".clase_divs").on('click', function () {
      var id = $(this).attr('id');
      var num = id.substr(id.length - 1);
      $(".clase_divs").addClass("hide").filter(function(){
       return $(this).attr('id') == 'div-prueba-'+num;
      }).removeClass("hide");
  });
});
.hide {
  display:none;
}

.clase_divs{
border:1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="clase_divs" id="div-prueba-1">div 1</div>
<div class="clase_divs" id="div-prueba-2">div 2</div>
<div class="clase_divs" id="div-prueba-3">div 3</div>
<div class="clase_divs" id="div-prueba-4">div 4</div>

1

¿Que te parece esta reducción?

    $("#div-prueba-1").on('click', function () {
        $(this).toggleClass("show");
        $("#div-prueba-2, #div-prueba-3, #div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-2").on('click', function () {
        $(this).toggleClass("show");
        $("#div-prueba-1, #div-prueba-3, #div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-3").on('click', function () {
        $(this).toggleClass("show");
        $("#div-prueba-1, #div-prueba-2, #div-prueba-4").toggleClass("hide");
    });
    $("#div-prueba-4").on('click', function () {
        $(this).toggleClass("show");
        $("#div-prueba-1, #div-prueba-2, #div-prueba-3").toggleClass("hide");
    });
1
  • Orale , muchas gracias, támbien me gusto esta respuesta. Saludos
    – Critter236
    Commented el 13 dic. 2018 a las 22:28

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.