通过javascript更改attr元素答案

【问题标题】：change attr element by javascript通过javascript更改attr元素
【发布时间】：2022-10-24 00:17:09
【问题描述】：

这是我的 HTML 代码：

<div class="desc">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-1.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-2.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-3.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img src="http://sample.com/dl/image-4.jpg">
</div>

这是我的 JavaScript 代码：

$(document).ready(function() {
    $('.desc img').addClass('thumb lazyload').attr('data-src', $('.desc img').attr('src') ).attr('src','img/ui/logo/lazy.jpg');
});

我希望代码如下，但 JavaScript 代码不起作用：

<div class="desc">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-1.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-2.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-3.jpg">
<p>Lorem ipsum dolor sit amet,....</p>
<img class="thumb lazyload" src="img/ui/logo/lazy.jpg" data-src="http://sample.com/dl/image-4.jpg">
</div>

【问题讨论】：

它对我来说按预期工作
你遇到了什么错误？
你期待在这里发生什么？ “它不起作用”是不够的。

标签： javascript html jquery css

【解决方案1】：

考虑以下。

$(document).ready(function() {
  $('.desc img').each(function(i, el) {
    $(el).addClass('thumb lazyload').attr({
      'data-src': $(el).attr('src'),
      'src': 'img/ui/logo/lazy.jpg'
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="desc">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-1.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-2.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-3.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-4.jpg">
</div>

此代码迭代每个选定的项目并对每个元素进行更改。您的代码不明确，您可能无法获得预期的结果。

查看更多：https://api.jquery.com/each/

【讨论】：

【解决方案2】：

$('.desc img').attr('src') 返回匹配选择器的第一个元素的属性，而不是正在设置其data-src 属性的元素。

您可以将函数作为.attr() 的第二个参数。该函数将被调用，this 等于当前元素，其返回值将用于该元素。

$(document).ready(function() {
  $('.desc img').addClass('thumb lazyload').attr('data-src', function() {
    return this.src;
  }).attr('src', 'img/ui/logo/lazy.jpg');
});

<div class="desc">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-1.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-2.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-3.jpg">
  <p>Lorem ipsum dolor sit amet,....</p>
  <img src="http://sample.com/dl/image-4.jpg">
</div>

【讨论】：

【解决方案3】：

document.querySelector('[src="img/ui/logo/lazy.jpg"]').classList.add([mention classname you want to add]);

这是您可以添加或删除类名或更改 attr 的方式

【讨论】：