更改元素Onclick中的图像 [英] Change image in element Onclick

问题描述

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

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

目标：

 < div class =mainPicture> ; 
< img src =/ img / 0〜7183AF0F-799A-4248-A9B0-848F038DE194〜400〜300〜1class =photoalt =MC812-REF> 
< / div> 
  

链接：

 <李> 
< a rel =colorboxRel1930551650href =/ img / 0〜C19CB486-F38E-4F27-999F-200B35EFB916〜640〜480〜1class =testColorbox cboxElementonclick =return false;> ; 
 < / a> 
< / li> 
 
< li> 
< a rel =colorboxRel1930551650href =/ img / 0〜E1E5892F-0A22-4DA0-A9F8-3A93C4461125〜640〜480〜1class =testColorbox cboxElementonclick =return false;> ; 
< img src =/ img / 0〜E1E5892F-0A22-4DA0-A9F8-3A93C4461125〜70〜70〜1alt =Högervinkeltitle =Högervinkel> 
< / a> 
< / li> 
  

我如何使用jQuery或Vanilla Js来做到这一点？

解决方案

您可以使用jQuery .attr（） p>

  $（li a）。click（function（）{
 $（。mainPicture img）。attr （src，$（img，this）.attr（src））; 
}）; 
  

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

I have an a href element with an image - and another links with an image.

I want to swap the target image with the image from the clicked link.

Target:

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

Links:

<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>

How do I do this with jQuery or Vanilla Js?

解决方案

You can use the jQuery .attr() method

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

Documentation: http://api.jquery.com/attr/

这篇关于更改元素Onclick中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！