仅当元素具有两个特定类时如何在元素上触发函数
Posted
技术标签:
【中文标题】仅当元素具有两个特定类时如何在元素上触发函数【英文标题】：How to trigger a function on an element only when it has two specific classes 【发布时间】：2018-04-04 15:21:05 【问题描述】：我有这段代码通过将所有“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
【问题讨论】：
试试.lazy.show（中间没有空格）
@marekful 我试过了：$( '.lazy.show' ) (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; 没有运气。 （尝试使用和不使用 window.onload 行，因为我认为我不应该使用它，但不是 100% 确定）。我的代码仍然什么都不做。
【参考方案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>【讨论】：
【参考方案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
【讨论】：
太完美了！谢谢！ :) 并清楚地解释了为什么它也有效！我将它附加到添加 .show 的点击事件中，并在之后添加了一个 .removeClass 'lazy' 行，以便它只为每个图像触发一次。谢谢@ezanker :)以上是关于仅当元素具有两个特定类时如何在元素上触发函数的主要内容，如果未能解决你的问题，请参考以下文章