2017-12-31 49 views
1

Ich habe ein paar Quadrat Container flex Feld unterteilt in Viertel mit Innenbildern. Ich habe ein tolles Javascript durch https://stackoverflow.com/users/4940910/cdoshi, die das viertel Bild vergrößern, das die Kiste beim Klicken füllt. Ist perfekt! Das Problem kommt mit den nächsten Boxen mit dem gleichen Typ/Namen der Klassen. Das Skript betrifft jede Box und ich möchte die Interaktion in jedem Container separat.Verwalten von Bildern mit Javascript innen flex-box

var classname = document.getElementsByClassName("photoContainer"); 
 
var containerWidth = document.getElementsByClassName('container')[0].offsetWidth; 
 

 
\t var myFunction = function(ev) { 
 
    
 
    if(this.classList.contains('expandImage')) { 
 
    this.classList.remove('expandImage'); 
 
    for (var i = 0; i < classname.length; i++) { 
 
\t  \t classname[i].classList.remove('hideImage'); 
 
\t \t } 
 

 
    return; 
 
    } 
 
\t \t 
 
\t \t for (var i = 0; i < classname.length; i++) { 
 
\t  \t classname[i].classList.add('hideImage'); 
 
\t \t } 
 
\t \t this.classList.remove('hideImage'); 
 
\t \t this.classList.add('expandImage'); 
 
\t  this.style.width = containerWidth; 
 
\t \t 
 

 
\t }; 
 

 
\t for (var i = 0; i < classname.length; i++) { 
 
\t  classname[i].addEventListener('click', myFunction, false); 
 
\t }
.wrap { 
 
display: -webkit-box; 
 
display: -moz-box; 
 
display: -ms-flexbox; 
 
display: -webkit-flex; 
 
display: flex; 
 
} 
 

 
.container 
 
{box-shadow: 0.075rem 0 0 0 #C9C9C9,0 0.075rem 0 0 #C9C9C9,0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset,0 0.075rem 0 0 #C9C9C9 inset; 
 
display: -webkit-box; 
 
display: -moz-box; 
 
display: -ms-flexbox; 
 
display: -webkit-flex; 
 
display: flex; 
 
float:left; 
 
position: relative; 
 
background-color: #e0eae9; 
 
margin: 1% ; 
 
width: 32vw; 
 
height: 32vw; 
 
} 
 

 
.half 
 
{} 
 

 
.photo {cursor: pointer; 
 
margin: 2%; 
 
display: block; 
 
width: 96%; 
 
max-width:98%; 
 
} 
 

 
.hideImage { 
 
\t display: none 
 
} 
 

 
.expandImage > img { 
 
    width: 100%; margin: 1%; 
 
}
<div class="wrap"> 
 
    
 
<div class="container"> 
 
<div class="half"> 
 
        <div id="quarter1" class="photoContainer"> 
 
<img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title=""> 
 
        
 
        </div>  
 
        <div id="quarter2" class="photoContainer"> 
 
<img class="photo" src="http://yvonnemichaelides.com/wp-content/uploads/2016/01/clock2.gif" alt="" title="" > 
 
        </div>      
 
</div> 
 
<div class="half"> 
 
        <div id="quarter3" class="photoContainer"> 
 
<img class="photo" src="https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435" alt="" title="" > 
 
        </div>  
 
        <div id="quarter4" class="photoContainer"> 
 
<img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title="" > 
 
        </div>     
 
</div> 
 
</div> 
 

 

 

 
<div class="container"> 
 
<div class="half"> 
 
        <div id="quarter1" class="photoContainer"> 
 
<img class="photo" src="https://static.microventures.com/img/offerings/aa4c0a40a4697128a3eed4eb3bcac0cd.png" alt="" title=""> 
 
        
 
        </div>  
 
        <div id="quarter2" class="photoContainer"> 
 
<img class="photo" src="https://www.lessannoyingcrm.com/i/landing/press/our_branding/full/lacrm_logo_square_blue.png" alt="" title="" > 
 
        </div>      
 
</div> 
 
<div class="half"> 
 
        <div id="quarter3" class="photoContainer"> 
 
<img class="photo" src="https://www.sandboxx.us/assets/img/press/tc.png" alt="" title="" > 
 
        </div>  
 
        <div id="quarter4" class="photoContainer"> 
 
<img class="photo" src="http://www.noriavirtual.com/cursos/theme/image.php/mb2nl/theme/1512996998/course-default" alt="" title="" > 
 
        </div>     
 
</div> 
 
</div> 
 

 

 

 
</div>

Soll ich ein anderes Skript für jeden Container der Klassen-Namen zu ändern, oder es ist eine logische Lösung?

Antwort

1

ich Rat Sie Ihre HTML/CSS-Code zu optimieren, wie Sie eine Menge von Markup verwenden ein einfaches Layout und gehen mit einer einfacheren jQuery Lösung wie diese zu erreichen:

$('.photo').click(function() { 
 
    $(this).toggleClass('expandImage') 
 
}) 
 

 
/* Or a JS solution like this 
 

 
let photos = document.querySelectorAll('.photo'); 
 
for(let i=0;i<photos.length;i++) { 
 
    photos[i].addEventListener('click',function(e) { 
 
    e.target.classList.toggle('expandImage'); 
 
    }) 
 
} 
 

 
*/
.wrap { 
 
    display: flex; 
 
} 
 

 
.container { 
 
    box-shadow: 0.075rem 0 0 0 #C9C9C9, 0 0.075rem 0 0 #C9C9C9, 0.075rem 0.075rem 0 0 #C9C9C9, 0.075rem 0 0 0 #C9C9C9 inset, 0 0.075rem 0 0 #C9C9C9 inset; 
 
    display: flex; 
 
    position: relative; 
 
    background-color: #e0eae9; 
 
    margin: 1%; 
 
    width: 32vw; 
 
    height: 32vw; 
 
    padding: 2px; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
img.photo { 
 
    height: 49%; 
 
    width: 49%; 
 
} 
 

 
img.photo.expandImage { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="container"> 
 
    <img class="photo" src="http://letsprattle.com/image/prattle-icon-square-white.png" alt="" title=""> 
 
    <img class="photo" src="http://yvonnemichaelides.com/wp-content/uploads/2016/01/clock2.gif" alt="" title=""> 
 
    <img class="photo" src="https://cdn.shopify.com/s/files/1/0387/1545/products/product_analysis_1024x1024.png?v=1426535435" alt="" title=""> 
 
    <img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" alt="" title=""> 
 
    </div> 
 
    <div class="container"> 
 
    <img class="photo" src="https://static.microventures.com/img/offerings/aa4c0a40a4697128a3eed4eb3bcac0cd.png" alt="" title=""> 
 
    <img class="photo" src="https://www.lessannoyingcrm.com/i/landing/press/our_branding/full/lacrm_logo_square_blue.png" alt="" title=""> 
 
    <img class="photo" src="https://www.sandboxx.us/assets/img/press/tc.png" alt="" title=""> 
 
    <img class="photo" src="http://www.noriavirtual.com/cursos/theme/image.php/mb2nl/theme/1512996998/course-default" alt="" title=""> 
 
    </div> 
 
</div>