单击即可更改元素中的图像

Change image in element Onclick

本文关键字：图像 元素 可更改 单击      更新时间：2023-09-26

我有一个带有图像的a href元素，另一个链接带有图像。

我想将目标图像与单击的链接中的图像进行交换。

目标：

<div class="mainPicture">
 <img src="/img/0~7183AF0F-799A-4248-A9B0-848F038DE194~400~300~1" class="photo" alt="MC812-REF">
</div>

链接：

<li>  
  <a rel="colorboxRel1930551650" href="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~640~480~1" class="testColorbox cboxElement" onclick="return false;">   
 <img src="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~70~70~1" alt="Närbild" title="Närbild">  
 </a>
</li>
<li>  
 <a rel="colorboxRel1930551650" href="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~640~480~1" class="testColorbox cboxElement" onclick="return false;">    
 <img src="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~70~70~1" alt="Höger vinkel" title="Höger vinkel">  
 </a>
</li>

如何使用jQuery或Vanilla Js实现这一点？

您可以使用jQuery .attr()方法

    $("li a").click(function(){
       $(".mainPicture img").attr("src", $("img", this).attr("src"));
    });

文件：http://api.jquery.com/attr/

首先，让我们给目标一个ID，以便在vanillaJS:中更容易使用

<div class="mainPicture">
    <img id="targetImg" src="/img/0~7183AF0F-799A-4248-A9B0-848F038DE194~400~300~1" class="photo" alt="MC812-REF">
</div>

然后你可以使用：

<li>  
    <a rel="colorboxRel1930551650" href="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~640~480~1" class="testColorbox cboxElement" onclick="document.getElementById('targetImg').src = this.childNodes[0].src; return false;">   
        <img src="/img/0~C19CB486-F38E-4F27-999F-200B35EFB916~70~70~1" alt="Närbild" title="Närbild">  
    </a>
</li>
<li>  
    <a rel="colorboxRel1930551650" href="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~640~480~1" class="testColorbox cboxElement" onclick="document.getElementById('targetImg').src = this.childNodes[0].src; return false;">    
        <img src="/img/0~E1E5892F-0A22-4DA0-A9F8-3A93C4461125~70~70~1" alt="Höger vinkel" title="Höger vinkel">  
    </a>
</li>

但是，我不确定href和rel属性在那里应该如何工作。

对于jQuery解决方案，最好将onclick单独使用，并使用以下JavaScript代码：

$(function() {
    $("a.testColorbox.cboxElement").click(function() {
        $(".mainPicture img").attr("src", $("img", this).attr("src"));
    });
});

$("a").on("click", function() {
  $(this).siblings("img").first().attr("src", this.getAttribute("href"));
});

纯JS

document.addEventListener("DOMContentLoaded", function() {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", function(e) {
      e.preventDefault();
      this.firstElementChild.setAttribute("src", this.getAttribute("href"));
    });
  }
});
相关文章：