Javascript 单击jquery时更改img src
我有一些HTML代码:Javascript 单击jquery时更改img src,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一些HTML代码: <div class="text-center img-big"> <!-- IMAGE BIG --> <img class="img-fluid img-big" src="" alt=""> </div> <!-- IMAGE SMALL --> <a id="getImg" href="" ><img src="img/asus.jpg" alt="" class="img
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<a id="getImg" href="" ><img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>
<a id="getImg" href="" ><img src="img/asus-thumb.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>
<img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100">
这是我的一些jquery代码:
<script type="text/javascript">
var imgSrc = $(".thumb-first").attr("src");
$(".img-big").attr("src",imgSrc);
$("#getImg img").on("click",function(){
tes = $(this).attr("src");
$(".img-big").attr("src",imgSrc);
});
</script>
我想在单击image small时更改src image big,但我的代码不能正常工作
首先,有多个元素具有相同的id属性 其次,此处未定义tes变量
tes = $(this).attr("src");
第三,尝试将javascript放在html页面的底部,或将javascript代码放在ready函数中:
$(document).ready(function(){
});
我所做的是将id=getImg更改为class=getImg,因为id属性应该总是唯一的
我使用的不是图像的单击事件,而是图像的单击事件
您不需要给出getImg,它可以通过onclick函数完成。试试我的代码
函数更改\u imgparam{
var src=$param.prop'src';
$'.img big'.prop'src',src;
}
您是否在console中看到任何错误。。?顺便说一句,有2个元素的类为img big,因此$.img big可能不会返回您想要的元素。试着像$img.img-big那样显式地获取img元素,类img big什么不起作用?你已经使用了两次getImg id…这是无效的…也不清楚你在做什么…你已经为asus使用了三个小图像…为什么?…更好地编辑你的问题你想把小图像的源传输到大图像吗点击后的图像?控制台中没有错误,当我点击小img时,图像大的src发生了变化,但又恢复到以前的工作状态,谢谢兄弟