javascript - 在 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>