gpt4 book ai didi

javascript - 通过 src 值查找 img 标签并在 img 标签中添加新属性

转载 作者:太空狗 更新时间:2023-10-29 16:52:18 24 4
gpt4 key购买 nike

如果我在 HTML 页面中有 5 张图片。我想通过它的 src 属性值搜索 2 个图像,并向图像标签添加一个新属性。

限制 是我不能通过任何 idclass 属性值搜索 img 标签,我只有 src 值。在下面的代码中,

我想搜索 2 个具有 src 值的 img 标签,如 img_src_1img_src_2 并想在两个 img 标签中添加一个新属性nopin="nopin"

<html>
<head>
<script>
jQuery(document).ready(function(){
// find img tag by src value and add new attribute nopin="nopin" into this img tag
var img_src_1 = "https://example.com/image-3.jpg";
var img_src_2 = "https://example.com/image-5.jpg";

// find images with src url value is img_src_1 & img_src_2
var result1 = jQuery('img').find('src', img_src_1);
var result2 = jQuery('img').find('src', img_src_2);

// add new attribute nopin="nopin" in both img tag

});
</script>
</head>
<body>
<h1>My Gallery Page</h1>
<p>My Image 1</p>
<img src="https://example.com/image-1.jpg" width="200px" height="200px">

<p>My Image 2</p>
<img src="https://example.com/image-2.jpg" width="200px" height="200px">

<p>My Image 3</p>
<img src="https://example.com/image-3.jpg" width="200px" height="200px">

<p>My Image 4</p>
<img src="https://example.com/image-4.jpg" width="200px" height="200px">

<p>My Image 5</p>
<img src="https://example.com/image-5.jpg" width="200px" height="200px">
</body>
</html>

结果 HTML 页面加载后应该是这样的

<html>
<body>
<h1>My Gallery Page</h1>
<p>My Image 1</p>
<img src="https://example.com/image-1.jpg" width="200px" height="200px">

<p>My Image 2</p>
<img src="https://example.com/image-2.jpg" width="200px" height="200px">

<p>My Image 3</p>
<img nopin="nopin" src="https://example.com/image-3.jpg" width="200px" height="200px">

<p>My Image 4</p>
<img src="https://example.com/image-4.jpg" width="200px" height="200px">

<p>My Image 5</p>
<img nopin="nopin" src="https://example.com/image-5.jpg" width="200px" height="200px">
</body>
</html>

非常感谢任何帮助,提前致谢。

最佳答案

您可以通过使用 jQuery 的属性选择器,然后使用 attr() 添加 nopin 属性来实现这一点。

但值得注意的是,nopin 是一个非标准属性,可能会导致一些 HTML 有效性问题。如果可能,我建议改用 data-nopin

jQuery(function($) {
var img_src_1 = "https://example.com/image-3.jpg";
var img_src_2 = "https://example.com/image-5.jpg";

$(`img[src="${img_src_1}"], img[src="${img_src_2}"]`).attr('nopin', 'nopin');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>My Gallery Page</h1>
<p>My Image 1</p>
<img src="https://example.com/image-1.jpg" width="200px" height="200px">

<p>My Image 2</p>
<img src="https://example.com/image-2.jpg" width="200px" height="200px">

<p>My Image 3</p>
<img src="https://example.com/image-3.jpg" width="200px" height="200px">

<p>My Image 4</p>
<img src="https://example.com/image-4.jpg" width="200px" height="200px">

<p>My Image 5</p>
<img src="https://example.com/image-5.jpg" width="200px" height="200px">

关于javascript - 通过 src 值查找 img 标签并在 img 标签中添加新属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50346563/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com