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

检查课程..

＆＃13;

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";
}
}
}

＆＃13;

<!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="a b" placeholder="a class and b class">
</body>
</html>

＆＃13;

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);
  });

<强> DEMO

如何在元素有两个特定类

2 个答案: