0

Galera estou com um problema,estou fazendo um teste no JSFIDDLE https://jsfiddle.net/1qd6yj8w/8/ em que quando o usuario clicar na foto - precisa mudar imagem,isso já está no teste , porem o usuario quando clicar na imagem de baixo , a de cima volta a ser o q era...

Obrigado <3

1
  • Não entendi. No seu js fiddle ao clicar nas imagens de baixo as de cima continuam como estão. Você precisa que ele faça isso? Que quando clicar em uma imagem todas as outras voltem pra imagem default? 28/09/2018 às 14:20

2 Respostas 2

5

Tem muita redundância no seu código. Selecionando e tratando os elementos pela coleção é muito mais fácil em vez de criar um monte de ids que dificultam mais tendo que criar um evento pra cada id.

Primeiro crie uma classe que esconde os elementos em vez de colocar vários style="display:none;". Crie uma classe chamada .hide e coloque nas imagens que você quer esconder:

.hide{
   display: none;
}

Como todas as imagens são filhas da mesma div com a classe .media3, você pode criar apenas 1 evento e tratar tudo de uma só vez, usando o índice da imagem na coleção.

Em toda coleção de elementos, cada elemento possui um índice, que vai de 0 ao número de elementos -1.

Seu código ficaria assim:

$(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>
<section class="lala">
  <div class="media3">
    <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
    <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
    <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
   <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
   <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
   </div>
</section>

<div class="video" style="display:none;">
    <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
</div>

Veja que as imagens não precisam de ids nem classes, apenas as imagens de índices ímpares possuem a classe .hide para aparecem escondidas inicialmente.

Se quiser um código ainda um pouco mais enxuto, pode usar operadores ternários nos métodos do jQuery:

$(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();
   });
});

Veja:

$(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>
<section class="lala">
  <div class="media3">
    <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
    <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
    <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
   <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
   <img src="https://i.postimg.cc/yY0HLCvp/facebook.png"><img class="hide" src="https://i.postimg.cc/MHRh31bf/instagram.png">
   </div>
</section>

<div class="video" style="display:none;">
    <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
</div>

6
  • Dvd o que é esse % (i%2 == 0)
    – hugocsl
    28/09/2018 às 14:51
  • 1
    Pra ver se o índice é par
    – Sam
    28/09/2018 às 14:53
  • 1
    Ah, o %? É um operador que devolve o resto de uma divisão: 4%2, resto 0... 5%2, resto 1...
    – Sam
    28/09/2018 às 14:54
  • Agora fez sentido, então se a operação retornar true vc da o .show, se for false .hide, pelo que entendi... Legal ainda não estudei esse o operador :)
    – hugocsl
    28/09/2018 às 14:58
  • 1
    Sim, só que diferente de nth-child, os índices começam com 0.
    – Sam
    28/09/2018 às 15:04
2

Já que vc já está usando jQuery vc pode usar .next() e .prev() para reduzir bastante esse código. Só estou indicando esse método devido a estrutura que vc montou das imagens no HTML, uma depois da outra, intercalando imagem com display:block e display:none

Outra coisa, vc não precisa usar os IDs, isso fez seu script crescer muito! E sempre que vc incluir um novo item vc vai precisar criar um novo script... Da forma que eu fiz eu coloquei apenas uma classe para vc usar como referência para pegar o elemento e colocar o CSS.

Para entender melhor veja o exemplo como ficou. Já vou falando eu não entendo muito de jQuery, mas acho que vai te servir

    $(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>
    
    <section class="lala">
        <div class="media3">
          <img class="face" id="new1" src="https://i.postimg.cc/yY0HLCvp/facebook.png">
          <img class="insta" id="new2" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">

          <img class="face" id="new3"src="https://i.postimg.cc/yY0HLCvp/facebook.png">
          <img class="insta" id="new4" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">

          <img class="face" id="new5"src="https://i.postimg.cc/yY0HLCvp/facebook.png">
          <img class="insta" id="new6" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">

         <img class="face" id="new7"src="https://i.postimg.cc/yY0HLCvp/facebook.png">
         <img class="insta" id="new8" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">

         <img class="face" id="new9"src="https://i.postimg.cc/yY0HLCvp/facebook.png">
         <img class="insta" id="new10" style="display:none;"src="https://i.postimg.cc/MHRh31bf/instagram.png">

        </div>
    </section>
      
    <div class="video" style="display:none;">
        <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
    </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .