仅当元素具有两个特定类时如何在元素上触发函数

Question

我有这段代码可以通过将所有“img data-src”更改为“img src”来延迟图像加载。

function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

目前它在页面加载时触发。 我想要的是它仅在元素同时具有 .lazy 和 .show 类时触发

所有元素都如下所示：

<li class="lazy hidden baratheon packcore" data-filtertext="01048"><a><div><img data-src="img/01048.jpg" class="cardimg"></div></a></li>

.hidden 被分配了 display:none，.show 有 display:block，并且有各种点击将 .addClass 'show' 和 .removeClass 'hidden'。

我玩过各种组合

$( 'lazy, .show' ) (function () {

但我清楚地理解甚至比我想象的还要少，无法让它发挥作用。

当一个元素存在两个特定类时，如何触发函数 - 并将该函数仅应用于这些元素？

最好将它作为一个单独的脚本来寻找这两个类，还是将它包含在 .addclass 'show' 脚本中以便在添加 .show 时自动运行？

编辑：更正了 li 代码以显示 data-src 而不仅仅是 src

Answer 1

检查类..

 window.addEventListener("DOMContentLoaded",f); function f(){ var i = document.body.childNodes; for(var k=0;k < i.length; k++){ var e = i[k]; if(typeof e.className === 'undefined') continue; if((e.className.indexOf("a") > -1) && (e.className.indexOf("b") > -1)) { e.style.backgroundColor = "red"; } } }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <input type="text" class="a" placeholder="Only a class"> <input type="text" class="ab" placeholder="a class and b class"> </body> </html>

Answer 2

使用 jQuery each() 函数遍历您的 .lazy.show 列表项。 然后对于每一个，找到子图像并将 src 设置为 data-src 中的值：

  $(".lazy.show").each(function(idx){    
    var $img = $(this).find("img");
    var src = $img.data("src");
    $img.prop("src", src);
  });

演示

仅当元素具有两个特定类时如何在元素上触发函数

问题描述

2 个解决方案

解决方案1
1 2017-10-24 00:40:25

解决方案2
0 已采纳 2017-10-24 13:50:32

仅当元素具有两个特定类时如何在元素上触发函数

问题描述

2 个解决方案

解决方案1 1 2017-10-24 00:40:25

解决方案2 0 已采纳 2017-10-24 13:50:32

解决方案1
1 2017-10-24 00:40:25

解决方案2
0 已采纳 2017-10-24 13:50:32