javascript - 图像预览 - 将 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