Question

我有以下img标记，它是较大HTML页面的一部分。这是文档中的第一个图像标记。我想用data-original属性更改第一个图像（white.png）。

<img width="676" height="450"
     src="http://somewebsite/white.png"
     data-original="http://somewebsite/shutterstock_197488871-676x450.jpg"
     class="lazy attachment-post-thumbnail wp-post-image" alt="(Shutterstock*)"
/>

这是HTML

  <div style="font-size: 12pt; color: #ccc; margin-top: 5px; margin-bottom: 5px;"><span id="author">Natural News</span> | <span>Sat, 16 Aug 2014 13:06:21 PM</span>
</div>
<img width="676" height="450" src="http://somewebsiteimages/white.png" data-original="http://somewebsite/shutterstock_197488871-676x450.jpg" class="lazy attachment-post-thumbnail wp-post-image" alt="(Shutterstock*)" />
<noscript>
    <img width="676" height="450" src="http://somewebsite/shutterstock_197488871-676x450.jpg" class="attachment-post-thumbnail wp-post-image" alt="(Shutterstock*)" />
</noscript>

Answer 1

要获取图像，您可以使用以下方法之一：

var img = document.images[0];
var img = document.getElementsByTagName('img')[0];

要改变它，

之一

img.src = img.getAttribute('data-original'); // old way
img.src = img.dataset.original;              // new way

Answer 2

你可以这样做：

var workingImage = $("img").first();
workingImage.attr("src",workingImage.attr("data-original"));

搜索第一张图片。然后，它通过属性更改源。

Answer 3

我选择的实现是这个

$(document).ready(function () {
    $('img')
    .first()
    .attr('src', $('img').first().data('original'));
});

我添加了一个文档就绪函数，并在其中创建一个匿名函数来完成工作。首先，我选择了所有的＆＃39; img＆＃39;元素然后使用＆＃39; first（）＆＃39;方法我们将方法限制为只是文档中的第一个img元素。然后我们改变了'src＆＃39;图像的属性为原始＆＃39;的值。位于同一地点＆＃39; img＆＃39;元件。

如果您可以优化选择器以使用这样的图像类，那么您也可以获得更好的结果

$('img.wp-post-image')

您还可以将jQuery选择器更改为

$('img.wp-post-image:first')

然后你可以删除.first（）函数调用。哪个会在.ready函数中留下这个：

$('img.wp-post-image:first').attr('src', $('img.wp-post-image:first').data('original'));

的引用： jQuery :first selector jQuery .data() method

替换img属性

3 个答案: