在 flex-box 中使用 javascript 管理图像

Question

我有一些方形弹性盒子容器，分成四等份，里面有图片。我有一个很棒的 Javascript https://stackoverflow.com/users/4940910/cdoshi，它增加了点击时填充框的四分之一图像。是完美的！问题来自具有相同类型/名称的类的下一个框。该脚本影响每个盒子，我希望分别在每个容器中进行交互。

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

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

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

	};

	for (var i = 0; i < classname.length; i++) {
	    classname[i].addEventListener('click', myFunction, false);
	}

.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 {
	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>

我应该为每个更改类名的容器制作不同的脚本还是有一个合乎逻辑的解决方案？

Answer 1

我建议您优化您的 HTML/CSS 代码，因为您使用大量标记来实现简单的布局并使用更简单的 jQuery 解决方案，如下所示：

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