使用jquery更改图像标签src中的一些文本[重复]

Posted 2023-02-26

【中文标题】使用jquery更改图像标签src中的一些文本[重复]

【英文标题】：change some text in src of image tag using jquery [duplicate]

【发布时间】：2018-09-17 08:38:04

【问题描述】：

我想用js或者jquery改变图片标签src中的一个字母。

<img src="/media/image_i/ball.png">
<img src="/media/image_i/bat.png">

我想将 src 中的字母 i 更改为数字。 例如，它应该看起来像这样 -

<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">

编辑-当我使用解决方案时，一切正常，但是它将所有图像标签的“src”更改为与第一个图像相同，因此第二个图像“bat.png”被更改为“ball.png”。 png"，因此同一图像显示两次。 谢谢！

【问题讨论】：

看起来很琐碎，您尝试过哪些不起作用的方法？ Image src Property

请尝试自己解决这个问题。如果您遇到问题，请发布带有具体问题描述的问题，我们很乐意为您提供帮助

【参考方案1】：

首先，您需要确定需要修改的特定 img 元素。这可以通过多种方式完成，例如给有问题的img 一个id 或一个唯一的class。如果图像是唯一使用您在问题中指定的src 的图像，则可以使用它（这就是我在下面的代码中所做的）。

在获得对元素的正确引用后，使用.attr() 方法获取/设置当前src 值并使用标准String.replace 方法交换值：

var current = $("img[src='/media/image_i/ball.png']");
current.attr("src", current.attr("src").replace("_i", "_4"));

如果这就是您需要做的全部，那么 JQuery 就大材小用了。标准 javascript 也同样简单：

var el= document.querySelector("img[src='/media/image_i/ball.png']");
el.src = el.src.replace("_i", "_4");

【讨论】：

谁投了反对票？

今天早上有人脾气暴躁。这是正确的答案，也提供了 JS 的替代方案。

@DTavaszi 明智地使用您的编辑权限。切勿出于您在此处所做的原因而编辑问题或答案。我的措辞、语法和格式是故意的，我已经恢复了编辑。编辑是为了纠正错误或澄清。您的编辑不会这样做。

@ScottMarcus 感谢您的反馈，马库斯。我的编辑评论解释了我的更改。请记住，作为帖子的作者，您所写的内容对于偶然发现此答案的其他人来说并不明显。减少冗余词有助于读者理解答案。例如，“你需要”的措辞是多余的，“特定的”也是如此，因为编码人员不会在这里修改他们不需要的图像 - 或非“特定”的图像。因此，我明智地使用了我的编辑权限来澄清您原本写得很好的答案的一小部分。

@ScottMarcus 您原始帖子中的措辞并未反映您现在写给我的信息。同样，这对您来说很有意义，因为您编写了它。但是要传达这些信息，您需要明确。我的编辑并没有改变您帖子的含义。如果你不明白这一点，那也没关系。 Stack Overflow 是一个社区平台，因此我的编辑获得了批准。

【参考方案2】：

您可以简单地获取图像的src 属性，将其循环并使用JQuery 将_i 替换为_4。要检查以下sn-p是否有效，您需要使用浏览器的inspect element并检查src属性。

$(document).ready(function()
  $('img').each(function()
    var src = $(this).attr('src');;
    $(this).attr('src', src.replace('_i','_4'));
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">

【讨论】：

嗨，现在请看问题，我遇到了一个新问题。谢谢

@john 因为您有多个图像，您需要循环到images 并更改每个图像的src 属性。检查更新的答案，如果有帮助请打勾。

非常感谢 Ankit Agrawal 这个 sn-p 是我所需要的！！

【参考方案3】：

您可以使用正则表达式来完成这项工作。

$(document).ready(function()
  var src = $('img').attr('src');
  var newsrc = src.replace(/_./g, '_4');
  $('img').attr('src', newsrc);
 );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_i/ball.png">

您可以进一步开发它。 更多：https://***.com/a/2912904/5792209