img src 路径仅在悬停 jquery 时提供第一个孩子答案

【问题标题】：img src path gives first child only on hover jqueryimg src 路径仅在悬停 jquery 时提供第一个孩子
【发布时间】：2011-11-28 19:16:52
【问题描述】：

我在 html 中创建了一个图像 div，下面是代码

<div class="container">
    <div class="TabMenu">
        <span><img src="images/ecom.png"></span>
        <span><img src="images/cms.png"></span>
        <span><img src="images/crm.png"></span>
        <span><img src="images/creative.png"></span>
        <span><img src="images/development.png"></span>
        <span><img src="images/qa.png"></span>
        <span><img src="images/mobile.png"></span>
    </div>
</div>

现在我写了 jquery

$(".container .TabMenu span").mouseover(function() {
    var imgpath = $('img').prop('src');
    alert(imgpath);
})

当悬停在任何图像上时，它会显示一个带有第一张图像路径的警报框，而不是相应的路径。我如何检索各自的图像路径

现在我在这里提出一个问题

当我点击特定图像时，它的图像应该改变，下面是我写的代码

我有两个图像，分别是 image1.png 和 image1-h.png，通过这种方式，我使用悬停样式，但是

$(".container .TabMenu span").click(function(){
var newSrc = $('img', this).attr('src').replace(".", "-h.");
$('img', this).attr("src", newSrc);             
});

我有两个图像，分别是 image1.png 和 image1-h.png，通过这种方式，我通过将图像名称替换为“-h”来使用悬停样式。但是当我点击这个图像 ecom 然后它变成 ecom-h 和 cms 到 cms-h 时，我怎样才能恢复该图像的原始 src 路径，以便该图像处于活动状态。当我点击其他图片时，之前点击过的图片路径应该是原始路径

【问题讨论】：

标签： javascript jquery html image

【解决方案1】：

改用这个：

var imgpath = $('img', this).prop('src');

在您的情况下，您正在整个文档中查找 img 标记并首先获取它们。

【讨论】：

这个不错！我将通过使用$('img') 来解释@Rafee 实际做了什么以获得最佳答案。 +1 至少是因为不是每个人都记得jQuery() 的第二个参数context，尽管它可能真的很方便使用。
我用这个作为短语法，只有相对路径怎么样
如何获取图片的相对路径

【解决方案2】：

使用this定位当前元素，children()选择图片；

$(".container .TabMenu span").mouseover(function(){
    var imgpath = $(this).children('img').prop('src') ;
    alert(imgpath);
});

【讨论】：

【解决方案3】：

试试：

$(".container .TabMenu 跨度").mouseover(function(){ var imgpath = $(this).children("img").attr('src') ; 警报（imgpath）；

【讨论】：