使用 jQuery 更改单个图像源

Question

我需要在包含许多图片的网站上更改多个单独图片的图片来源。他们没有我可以用来识别每张图片的 ID，这就是为什么我需要根据每张图片的当前来源进行更改。

我还没有找到有效的解决方案。

html 看起来像这样：

<img class="card-image" alt="" src="www.url.com/12987237857.an-individual-photo.jpg">

我发现并尝试了很多变体，但还没有找到一种方法来仅对特定的 img src 进行此更改：

  $('.card-image').attr('src', $('.card-image').attr('src').replace('original', 'new'));

我之前用 hrefs 做过类似的事情，而且效果很好：

 $('a[href$="partOfOldURL"]').attr('href', 'newURL');

有人能帮帮我吗？先感谢您！

Answer 1

我建议使用 jQuery.each 函数。

$(document).ready(function(){
  $('.card-image').each(function(){
    $(this).attr('src', $(this).attr('src').replace('original', 'new'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="card-image" alt="" src="https://via.placeholder.com/150?text=original+1234">
<img class="card-image" alt="" src="https://via.placeholder.com/150?text=original+5678">

Answer 2

您可以使用 .attr( attributeName, function ) 轻松做到这一点，例如：

$(".card-image").attr("src", function(i, val) {
  return val.replace('individual', 'new');
});

演示：

$(".card-image").attr("src", function(i, val) {
  return val.replace('individual', 'new');
});

$(".card-image").each(function() {
  console.log($(this).attr("src"))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="card-image" alt="" src="www.url.com/12987237857.an-individual-photo.jpg">
<img class="card-image" alt="" src="www.url.com/12985555555.an-individual-photo.jpg">

你可以在这个演示中看到 individual src 中的文本被替换为 new 并且更新后的 src 也显示在控制台中。您可以在函数内替换任何您想要的文本。

Answer 3

您可以使用 attribute 选择器 [] 作为正确的 condition。

因为你的 tag 是 img 并且想要更新 src 使用 $('img[src$="partOfOldURL"]')。并且 .attr('src', 'newURL');

使用^匹配element和href以partOfOldURL

开头

$('img[src^="partOfOldURL"]').attr('src', 'newURL');

使用$匹配element和href以partOfOldURL结束

$('img[src$="partOfOldURL"]').attr('src', 'newURL');

使用*匹配element与href包含partOfOldURL

$('img[src*="partOfOldURL"]').attr('src', 'newURL');

请查看 jQuery selectors 以了解更多信息。

使用 jQuery 更改单个图像源

Changing individual image sources with jQuery

jquery

imgsource