如何通过 jquery 更改 src 的值？答案

【问题标题】：How to change the src's value by jquery?如何通过 jquery 更改 src 的值？
【发布时间】：2012-01-10 16:46:39
【问题描述】：

html结构：

<div class="myimages">
   <div id="mainimg"><img src="images/Pic/1.jpg"></div>
   <div id="addimg">
      <li class="addimg"><img src="images/Pic/1_01.jpg"></li>
       <li class="addimg"><img src="images/Pic/1_02.jpg"></li>
        <li class="addimg"><img src="images/Pic/1_03.jpg"></li>

    </div>
</div>

当鼠标悬停在addimg中的li上时如何通过jquery更改img src的值（在<div id="mainimg">中）。即，当鼠标悬停在第二个li上时，<div id="mainimg"><img src="images/Pic/1.jpg"></div>将变为@ 987654326@。在第一或第三里时。变化是一样的。谢谢

【问题讨论】：

您可能想熟悉一下 jquery 的操作功能。 api.jquery.com/category/manipulation

标签： jquery

【解决方案1】：

这样的事情应该可以工作：

$('li.addimg').hover(function() {
   var src = $(this).find('img').attr('src');
   $('#mainimg img').attr('src', src);
});

我们在这些 li 上捕获悬停事件，然后在触发悬停的 li 内抓取 img 的 src，并将其设置为 id 为“mainimg”的 div 内的 img 的新 src

【讨论】：

【解决方案2】：

试试这个：

$('.addimg').mouseover(function() {
  $('.mainimg img').attr('src', $(this).find('img').attr('src'));
});

【讨论】：

【解决方案3】：

您可以按照以下方式实现它

$(".adding").hover( function() {
       var hoverImg = HoverImgOf($(this).attr("src"));
       $("#mainimg img").attr("src", hoverImg);
     }

【讨论】：

【解决方案4】：

应该是这样的：

jQuery('li.addimg').onmouseover(function() {
  jQuery('#mainimg img').attr('src', jQuery(this).children('img').attr('src'));
}

【讨论】：

【解决方案5】：

假设您不希望在将鼠标从li 移开时图像变回1.jpg，您可以将事件处理程序绑定到mouseover 事件并使用replaceWith 替换图像与li中的那个：

$("li.addimg").mouseover(function() {
    $("#mainimg img").replaceWith($(this).find("img"));
});

【讨论】：

【解决方案6】：

试试：

http://jsbin.com/ifofot/edit#javascript,html

$('#addimg li.addimg img').on('mouseover',function (){
$(this).parents(".myimages").find("#mainimg img").attr('src',$(this).attr('src'));


});

【讨论】：