用Vannila JS替换IMG源

时间:2018-10-09 10:24:14

标签: javascript arrays

我的目标是将function myfunction(ref) { getReport(ref, "queue", "pageviews").done(function(r1) { getReport(r1.reportID, "get", null).done(function(r2) { console.log(r2); }) }); } function getReport(ref, type, metric) { return $.getJSON("report.php", { ref: ref, type: type, metric: metric }); } 图片来源更改为点击图片来源。当前图像应显示高分辨率图像的图像源,而低分辨率图像应作为选项供您选择。单击较低分辨率的图像时,当前图像应显示具有较高分辨率的特定图像,其余图像的分辨率较低。

id="current" =分辨率较低的图片

photos/thumbnails/... =高分辨率图像。

photos/....是静态的,并显示单击的连接与较高分辨率的连接,而较低分辨率的连接。

非常感谢您,我现在已经绝望了。感谢您的建议和指导,这是我的第一个js项目。

current

  <div class="container">
<div class="main-img">
  <img src="photos/thumbnails/01.jpg"  id="current">
</div>
  <div class="imgs">
    <img src="photos/thumbnails/01.jpg"  id="1">
    <img src="photos/thumbnails/02.jpg"  id="2">
    <img src="photos/thumbnails/03.jpg"  id="3">
    <img src="photos/thumbnails/04.jpg"  id="4">
    <img src="photos/thumbnails/05.jpg"  id="5">
    <img src="photos/thumbnails/06.jpg"  id="6">
    <img src="photos/thumbnails/07.jpg"  id="7">
    <img src="photos/thumbnails/08.jpg"  id="8">
    <img src="photos/thumbnails/09.jpg"  id="9">
    <img src="photos/thumbnails/10.jpg"  id="10">
    <img src="photos/thumbnails/11.jpg"  id="11">
    <img src="photos/thumbnails/12.jpg"  id="12">
   </div>
  </div>

1 个答案:

答案 0 :(得分:0)

您只需从目标源中删除thumbnails/,即:

function imgClick(e) {
  current.src = e.target.src.replace('thumbnails/', '');   
}

因此,replaces thumbnails/在带有空字符串的原始目标中,并将新的源分配给current