Fra*_*ank 4 html javascript jquery html5 image
如果我有5个图像进入HTML页面.我想通过它的src属性值搜索2个图像,并为图像标记添加新属性.
限制是我无法img通过任何id或class属性值搜索标签,我只有src值.在下面的代码中,
我想搜索的具有类似的src值2 img标签img_src_1和img_src_2,并希望在这两个添加一个新的属性img标签诺信="诺信".
<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">请尝试以下简单易行的解决方案：
var img_src_1 = "https://example.com/image-3.jpg";
var img_src_2 = "https://example.com/image-5.jpg";
jQuery("img").each(function() {
if(jQuery(this).attr("src") == img_src_1 || jQuery(this).attr("src") == img_src_2)
{
jQuery(this).attr("nopin", "nopin");
}
});
| 归档时间： |
|
| 查看次数： |
1418 次 |
| 最近记录： |