图片预览 - 将div更改为已点击的内容 - 聚合物（无JQuery）

Question

我对于“更改个人资料图片”类型框有以下代码。

任何人都可以帮助我实现功能，当我点击较小的图像框时，大图像将改变为当前选定的图像？

我想尽可能避免使用JQuery。

Please see my JSFiddle

<div class="vertical layout"> 
    <img src="http://via.placeholder.com/320x320" class="pictureBox"> 
    <div class="horizontal-divider"></div> 
    <div class="buttons horizontal layout"> 
     <paper-button class="save" id="save">save</paper-button> 
     <paper-button class="delete" id="delete">delete</paper-button> 
     <paper-button class="cancel" id="cancel" dialog-dismiss>cancel</paper-button> 
    </div> 
    </div> 

    <div class="vertical-divider"></div> 

    <div class="vertical layout"> 
    <div class="images"> 
     <div class="horizontal layout row"> 
     <img src="http://via.placeholder.com/100x100" class="image"> 
     <img src="http://via.placeholder.com/100x100" class="image"> 
     <img src="http://via.placeholder.com/100x100" class="image"> 
     </div> 
     <div class="horizontal layout row"> 
     <img src="http://via.placeholder.com/100x100" class="image"> 
     <img src="http://via.placeholder.com/100x100" class="image"> 
     <img src="http://via.placeholder.com/100x100" class="image"> 
     </div> 
     <div class="horizontal layout row"> 
     <img src="http://via.placeholder.com/100x100" class="image"> 
     <img src="http://via.placeholder.com/100x100" class="image"> 
     <img src="http://via.placeholder.com/100x100" class="image"> 
     </div> 
    </div> 
    <div class="horizontal-divider"></div> 
    <div class="horizontal layout fileUploadContainer"> 
     <paper-button class="upload" id=uploadButton on-click="uploadButton">Upload</paper-button> 
     <input type="text" readonly id="fileName" class="fileName" placeholder="File..." on-click="openUpload"></input> 
     <input type="file" class="fileUpload" id="fileUpload" on-change="newFile"> 
    </div> 
    </div> 
</div> 

Answer 1

你可以做这样的事情，对它们使用clickImage函数的所有小图片onclick事件。

function clickImage(image) 
 
{ 
 
    document.getElementById("bigPicture").src = image.src; 
 
}

#bigPicture 
 
{ 
 

 
    height:320px; 
 
    width:320px; 
 
}

<div class="vertical layout"> 
 
    <img src="http://via.placeholder.com/320x320" class="pictureBox" id="bigPicture"> 
 
    <div class="horizontal-divider"></div> 
 
    <div class="buttons horizontal layout"> 
 
     <paper-button class="save" id="save">save</paper-button> 
 
     <paper-button class="delete" id="delete">delete</paper-button> 
 
     <paper-button class="cancel" id="cancel" dialog-dismiss>cancel</paper-button> 
 
    </div> 
 
    </div> 
 

 
    <div class="vertical-divider"></div> 
 

 
    <div class="vertical layout"> 
 
    <div class="images"> 
 
     <div class="horizontal layout row"> 
 
     <img src="http://via.placeholder.com/100x100" class="image" onclick="clickImage(this)"> 
 
     <img src="http://via.placeholder.com/100x100" class="image" onclick="clickImage(this)"> 
 
     <img src="http://via.placeholder.com/100x100" class="image" onclick="clickImage(this)"> 
 
     </div> 
 
     <div class="horizontal layout row"> 
 
     <img src="http://via.placeholder.com/100x100" class="image" onclick="clickImage(this)"> 
 
     <img src="http://via.placeholder.com/100x100" class="image" onclick="clickImage(this)"> 
 
     <img src="http://via.placeholder.com/100x100" class="image"> 
 
     </div> 
 
     <div class="horizontal layout row"> 
 
     <img src="http://via.placeholder.com/100x100" class="image" onclick="clickImage(this)"> 
 
     <img src="http://via.placeholder.com/100x100" class="image" onclick="clickImage(this)"> 
 
     <img src="http://via.placeholder.com/100x100" class="image" onclick="clickImage(this)"> 
 
     </div> 
 
    </div> 
 
    <div class="horizontal-divider"></div> 
 
    <div class="horizontal layout fileUploadContainer"> 
 
     <paper-button class="upload" id=uploadButton on-click="uploadButton">Upload</paper-button> 
 
     <input type="text" readonly id="fileName" class="fileName" placeholder="File..." on-click="openUpload"></input> 
 
     <input type="file" class="fileUpload" id="fileUpload" on-change="newFile"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
enter image description here