Problem with jQuery on display

Navigation
0

I'm having a problem, I'm testing JSFIDDLE link when the user clicks on the photo - needs to change image, this is already in the test, but the user when clicking the image below, the top is back to what was ...

Thank you

asked by anonymous 28.09.2018 / 15:56

2 answers

4

There's a lot of redundancy in your code. Selecting and treating elements in the collection is much easier instead of creating a bunch of id s that make it harder to create an event for every id .

First create a class that hides the elements instead of putting multiple style="display:none;" . Create a class named .hide and put it in the images you want to hide: 

.hide{
   display: none;
}

Since all images are daughters of the same div with class .media3 , you can only create 1 event and treat all at once by using the index of the image in the collection.

  

In every collection of elements, each element has an index, which goes   from 0 to the number of elements -1.

Your code looks like this: 

$(function() {
   $(document).on('click', '.media3 img', function () {
      // loop para resetar tudo
      // o 1º parâmetro da função .each é o índice do elemento representado pela variável "i"
      $('.media3 img').each(function(i){
         if(i%2 == 0){
            $(this).show(); // mostra as imagens de índice par
         }else{
            $(this).hide(); // esconde as imagens de índice ímpar
         }
      });
      
      var idx = $(this).index(); // pega o índice da imagem clicada
      
      // esconde a imagem clicada e...
      if(idx%2 == 0){
         $(this).hide().next('img').show(); // ...se for par, mostra a imagem seguinte
      }else{
         $(this).hide().prev('img').show(); // ...se for ímpar, mostra a imagem anterior
      }
   });
});
.media3{
  width:100%;
  display:flex;
  flex-direction: column;
  }
  
  .media3 img {
    width:100px;
    height:auto;
  }
.media3 h2{
  font-size: 16px; 
  color: red; 
  font-weight: bold;
  padding-bottom:20px;
}
.media3 p{
  color: rgb(112, 111, 111); 
  font-size: 16px; 
  font-weight: bold;
  padding-bottom: 20px;
}
.media3 strong{
  font-size:17px;
  font-weight: bold;
}
.media4{
  color:#FF0000;
  font-size:12px;
}

.video.for {
  display:block;
}

.hide{
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionclass="lala">
  <div class="media3">
    <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgsrc="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgsrc="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgsrc="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgsrc="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"></div></section><divclass="video" style="display:none;">
    <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg"></div>

Seethattheimagesdonotrequireidsorclasses,onlytheodd-numberedimageshavetheclass.hidetoappearhiddeninitially.

Ifyouwantevenslightlyleanercode,youcanuseternaryoperatorsinjQuerymethods:

$(function(){$(document).on('click','.media3img',function(){$('.media3img').each(function(i){$(this)[i%2==0?'show':'hide']();});varidx=$(this).index();$(this).hide()[idx%2==0?'next':'prev']('img').show();});});

See:

$(function() {
   $(document).on('click', '.media3 img', function () {
      $('.media3 img').each(function(i){
         $(this)[i%2 == 0 ? 'show' : 'hide']();
      });
      
      var idx = $(this).index();
      $(this).hide()[idx%2 == 0 ? 'next' : 'prev']('img').show();
   });
});
.media3{
  width:100%;
  display:flex;
  flex-direction: column;
  }
  
  .media3 img {
    width:100px;
    height:auto;
  }
.media3 h2{
  font-size: 16px; 
  color: red; 
  font-weight: bold;
  padding-bottom:20px;
}
.media3 p{
  color: rgb(112, 111, 111); 
  font-size: 16px; 
  font-weight: bold;
  padding-bottom: 20px;
}
.media3 strong{
  font-size:17px;
  font-weight: bold;
}
.media4{
  color:#FF0000;
  font-size:12px;
}

.video.for {
  display:block;
}

.hide{
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><sectionclass="lala">
  <div class="media3">
    <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgsrc="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgsrc="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgsrc="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgsrc="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png"></div></section><divclass="video" style="display:none;">
    <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
</div>
    
28.09.2018 / 16:33
2

Since you are already using jQuery you can use .next() and .prev() to greatly reduce this code. I'm just stating this method because of the structure you've assembled from the images in HTML, one after another, merging image with display:block and display:none

Another thing, you do not need to use the IDs, this made your script grow a lot! And whenever you include a new item you will need to create a new script ... In the way I did I just put a class to use as a reference to get the element and put the CSS.

To understand better, see the example as it was. I'm already talking I do not understand much of jQuery, but I think it will serve you 

    $(function() {
        $(".face").on('click', function () { 
            $( ".media3" ).find( ".insta" ).css('display' , 'none').prev().css('display' , 'block');
            $(this).css('display' , 'none')
            .next().css('display', 'block');
        });
    });
// se clicar na classe .insta ela some e volta o elemento .face
$(function() {
    $(".insta").on('click', function () { 
        $(this).css('display' , 'none')
        .prev().css('display', 'block');
    });
});
.media3{
  width:100%;
  display:flex;
  flex-direction: column;
}
  
  .media3 img {
    width:100px;
    height:auto;
  }
.media3 h2{
  font-size: 16px; 
  color: red; 
  font-weight: bold;
  padding-bottom:20px;
}
.media3 p{
  color: rgb(112, 111, 111); 
  font-size: 16px; 
  font-weight: bold;
  padding-bottom: 20px;
}
.media3 strong{
  font-size:17px;
  font-weight: bold;
}
.media4{
  color:#FF0000;
  font-size:12px;
}

.video.for {
  display:block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><sectionclass="lala">
        <div class="media3">
          <img class="face" id="new1" src="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="insta" id="new2" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgclass="face" id="new3"src="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="insta" id="new4" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgclass="face" id="new5"src="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="insta" id="new6" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgclass="face" id="new7"src="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="insta" id="new8" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png"><imgclass="face" id="new9"src="https://i.postimg.cc/yY0HLCvp/facebook.png"><imgclass="insta" id="new10" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png"></div></section><divclass="video" style="display:none;">
        <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
    </div>
    
28.09.2018 / 16:22
Which event should I associate with select? Return whole part in JavaScript