画像プレビュー - クリックしたものにdivを変更する - Polymer（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