使用jQuery更改img src

Question

我所拥有的HTML结构类似于：

<ul id="something">
  <li>
    <a href="">
      <img src="http://domain.com/directory/file1-128x79.jpg">
    </a>
  </li>
  <li>
    <a href="">
      <img src="http://domain.com/directory/file2-128x79.jpg">
    </a>
  </li>
  <li>
    <a href="">
      <img src="http://domain.com/directory/file3-128x79.jpg">
    </a>
  </li>
</ul>

我试图将文件名从 file#-128x79.jpg 更改为 file#-896x277.jpg。

我不知道如何获取动态生成的文件名并进行搜索和替换以更改 src。

我找到了一种替换整个 src 为“none”以确保我做得对的方法，但我不知道如何完成剩下的步骤。

$('#something').removeAttr('id').prop('class', 'some-class').find('img').prop('src', 'none');

- gavsiu

---

用文件名替换"none" - Mahesh KP

Answer 1

你可以通过选择器先选中所有的图像，然后使用attr回调函数来替换每个img标签的src属性：

$('#something img').attr('src',function(i,e){
    return e.replace("-128x79.jpg","-896x277.jpg");
})

- Niklas

---

谢谢。我使用了 .attr() 替换了第二个 .prop()，现在它完美地工作了。 - gavsiu

您所述prop()只用于分配布尔属性的说法是不正确的。它用于分配任何DOM属性。src是一个HTML属性(参见https://dev59.com/LW025IYBdhLWcg3wqX1o，T.J Crowder's解释)。jQuery在1.6.1中再次更改(http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)。对我来说，使用prop()或attr()设置img src似乎都可以工作。在Chrome 17、IE 8/9和Firefox 10上测试过jquery 1.6.1和1.7.1。 - mhenry1384

就像你可以使用 attr 获取布尔属性一样，你可以使用 prop 来获取非布尔属性。如果你阅读了你引用的链接（http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/），其中定义了“首选用法”为：“`.prop()` 方法应该用于布尔属性/属性以及在HTML中不存在的属性（如window.location）。所有其他属性（你可以在HTML中看到的属性）仍然可以和应该使用.attr() 方法进行操作。” - Niklas

在你的回答中，区分和引用1.6.1文档的做法应该得到赞赏。您可以使用“...并且适用于不存在的属性...”这样的注释来澄清prop用于分配布尔属性的说明。也许您可以编辑答案以包括这个条件。 - goodeye

关于“请注意，prop用于分配布尔属性”，不确定以前是否正确，但现在已经不再适用。 - coviex

@coviex 我已经删除了评论。 - Niklas

Answer 2

您可以为图像标签分配一个ID，例如：

<img id ="pic" src="http://domain.com/directory/file3-128x79.jpg">

然后在 jQuery 中使用：

$('#pic').attr('src', 'file#-896x277.jpg');

- Muhammad Adeel Zahid

Answer 3

DEMO

$('img').hover(function(){ // or any other method
    this.src = this.src.replace("128x79", "200x60");         
}); 

- Roko C. Buljan

---

但是当你将鼠标移开时，源代码仍然被替换了，我该怎么做才能将源代码交换回起始位置？ - user6465602

Answer 4

你应该在 .find('img') 前添加 .children() :

$('#something').removeAttr('id').attr('class', 'some-class').children().find('img').attr('src', 'none');

- Alex Pliutau

Answer 5

注意：这里的鼠标悬停仅用于演示目的

$(function() {
    $("something li a img")
        .mouseover(function() { 
            var src = "over.gif";
            $(this).attr("src", src); // change the image source
        })

});

- Pranay Rana

Answer 6

使用attr怎么样：

this.removeAttr('id').prop('class', 'featured-images').find('img').attr({‘src’:'file#-896x277.jpg’});

- Kamyar

Answer 7

$('#something img').attr('src',$('#something img').attr('src').replace(x,y))

- hungryMind