首页 > 解决方案 > 使用 jQuery 更改单个图像源

问题描述

我需要在包含许多图像的站点上更改多个单独图像的图像源。他们没有我可以用来识别每个单独图像的 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');

有人可以帮我吗?先感谢您!

标签: jqueryimgsource

解决方案


我建议使用该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">


推荐阅读