0
Guys I’m having a problem, https://jsfiddle.net/1qd6yj8w/8/ where when the user clicks on the photo - needs to change image, this is already in the test , however the user when clicking on the image below , the top back to q era...
Thank you <3
2 answers
5
There is a lot of redundancy in your code. Selecting and treating the elements by the collection is much easier instead of creating a lot of ids that make it more difficult to create an event for each id.
First create a class that hides the elements instead of placing several style="display:none;". Create a class called .hide and put in the images you want to hide:
.hide{
display: none;
}
As all images are daughters of the same div with the class .media3, you can create only 1 event and handle everything at once by using the image index 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 would look 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>
<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>Note that the images do not need ids or classes, only odd index images have the class .hide to appear hidden initially.
If you want even more streamlined code, you can use ternary operators in jQuery methods:
$(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();
});
});
Behold:
$(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>-
DVD what is this %
(i%2 == 0) -
1
To see if the index is even
-
1
Ah, the %? It is an operator that returns the rest of a division: 4%2, rest 0... 5%2, rest 1...
-
Now it made sense, so if the operation returns true vc da o . show, if it is false . Id, from what I understand... Cool I haven’t studied that operator :)
-
I will abuse your rss goodwill. Does every element have an index within a "list"? Like, all the kids inside a parent have their own position number, like Nth-Child?
-
1
Yes, only unlike Nth-Child, the indexes start with 0.
2
Since you are already using jQuery you can use .next() and .prev() to greatly reduce this code. I am only indicating this method due to the structure you have mounted the images in HTML, one after the other, interspersing image with display:block and display:none
Another thing, you don’t need to use the Ids, it made your script grow a lot! And whenever you include a new item you will need to create a new script... The way I did I put only one class for you to use as a reference to take the element and put the CSS.
To better understand see the example as it turned out. I’m talking I don’t 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>
<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>Browser other questions tagged javascript html jquery css
You are not signed in. Login or sign up in order to post.
I don’t understand. In your js fiddle by clicking on the bottom images the top ones continue as they are. Do you need him to do this? That when you click on an image all the others go back to the default image?
– Máttheus Spoo