Question

我有一个要添加到img标签的数据属性data-no-lazy。

之前

<img class="lazyloading" src="image.png" />

之后

<img class="lazyloading" src="image.png" data-no-lazy="1" />

如何通过jquery做到这一点？

我在网上看了，我想我有一个解决方案。但是，它没有用。

<script>
    jQuery('.lazyloading').attr('data-no-lazy','1');
</script>

我该怎么做才能添加数据属性？

Answer 1

首先，我将测试是否存在jQuery：

<script>
    console.log(jQuery); 
    // ... your code ...
</script>

按F12键在浏览器调试器窗口中显示控制台输出。

如果不存在，请确保已加载它，并且在执行js代码之前已加载它：

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
    // ... your code ...
</script>

然后确保在执行代码之前已加载文档：

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
    jQuery(document).ready(function(){
        // ... your code ...
    });
</script>

毕竟，我建议使用“数据”功能代替“ attr”功能：

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
    jQuery(document).ready(function(){
        jQuery('.lazyloading').data('no-lazy','1');
    });
</script>

如何通过jquery将数据属性添加到img标签？

1 个答案: