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

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="a b" 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);
  });

DEMO

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

How to trigger a function on an element only when it has two specific classes

javascript

css

jquery

jquery-mobile

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

How to trigger a function on an element only when it has two specific classes

javascript

css

jquery

jquery-mobile

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