javascript - flexbox 图像选择

Question

我有一个窗口，在响应式 flex 网格中有四个图像。我希望在单击图像时，这个图像得到 width=100% 覆盖(或隐藏)始终在 flexbox 中的其他图像。

我猜是使用 jQuery 和 JavaScript，但我找不到方法。有帮助吗？

谢谢。

.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;}

.half
{margin: 0.25rem;}

.photo {width: 15rem;
max-width:100%;
}

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

Answer 1

我对您的 HTML 结构做了一些改动。运行下面的代码片段

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;}

.half
{margin: 0.25rem;}

.photo {width: 15rem;
max-width:100%;
}

.hideImage {
	display: none
}

.expandImage > img {
    width: 100%;
}

<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" class="" alt="" title="">
                   
                    </div>    
                    <div id="quarter2" class="photoContainer">
<img class="photo" src="http://yvonnemichaelides.com/wp-content/uploads/2016/01/clock2.gif" class="" 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" class="" alt="" title="" >
                    </div>    
                   <div id="quarter4" class="photoContainer">
<img class="photo" src="http://www.northperthcommunityhospice.org/images/icons/calendar-icon.png" class="" alt="" title="" >
                    </div>                   
</div>