Simplify jquery

Navigation
0

I hope you can help me how to simplify some actions in jquery. This is my example link .

It does what I want, but I think it can be simplified, I think it's the right thing to do.

Of the example that I put this would be the part: 

$("#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>
    
asked by Critter236 13.12.2018 в 22:47
source

3 answers

3

Using the class instead of the ID, showing the click and hiding the brothers 

$(".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>
    
answered by 13.12.2018 / 23:15
source
1

I advise you to put a class to all your elements. Let's call it: "clase_divs"

If you play simply with the fact that if they do not have the "hide" class it is understood that they are not hidden, you could simplify it even more: 

$(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>

And if you play with the filter method: 

$(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>
    
answered by 13.12.2018 в 23:07
1

What do you think of this reduction? 

    $("#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");
    });
    
answered by 13.12.2018 в 23:14
Segmentation fault C in Dev C ++ Load new page and script afterwards