僅當元素具有兩個特定類時如何在元素上觸發函數

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