Question

我有一些方形的柔性盒子容器，四分之一，里面有图像。我已经通过https://stackoverflow.com/users/4940910/cdoshi获得了一个很棒的Javascript，它可以在点击时增加填充框的四分之一图像。是完美的！问题出在下一个具有相同类型/名称类的框中。该脚本影响每个框，我想分别在每个容器中进行交互。

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>

使用flex-box内的javascript管理图像

1 个答案: