要素に2つの特定のクラスがある場合にのみ関数をトリガーする方法

-2

すべての 'img data-src'を 'img src'に変更することにより、イメージの読み込みを遅らせるこのコードがあります。要素に2つの特定のクラスがある場合にのみ関数をトリガーする方法

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;

現在、ページが読み込まれたときにトリガされます。

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

.hiddenは、割り当てられた表示です：：、.SHOWは、ディスプレイを何も持っていない、それは要素が両方のクラスが.lazyている場合にのみ、トリガーと

を.SHOWするために私が欲しいの要素すべてがこのようになりです：ブロックし、.addClass 'show'と.removeClass 'hidden'となるさまざまなクリックがあります。

私は

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

の様々な組み合わせで周りにプレイしましたが、私ははっきりと私は私がやったと思ったよりもさらに少ない理解し、それを動作させることはできません。

特定の2つのクラスを持つ要素が存在し、それらの要素にのみ関数を適用すると、関数をトリガーするにはどうすればよいですか？

これは、常に2つのクラスを探したり、.addclassの 'show'スクリプトに追加して、.showが追加されたときに自動的に実行されるようにするのがよいでしょうか？

編集..だけでなく、SRC

出典

2017-10-23 Graeme Hay

は '.lazy.show'（間にスペースなし）私が試した – marekful

@marekfulをお試しください：（var i = 0; i

使用jQueryの各（）関数を李コードを修正しました.lazy.show listitemsを繰り返し実行します。そして、それぞれについて、データ-srcの中の値に子画像とセットSRCを見つける：

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

DEMO

出典

2017-10-24 13:50:32 ezanker

これは完璧です！ありがとうございました！ :)それはなぜあまりにも機能するの明確な説明と:)！これを.showを追加していたclickイベントに付け加え、.removeClass 'lazy'行を追加して、各イメージに対して1回だけトリガーするようにしました。ありがとう@ezanker :) –

クラスの確認のデータ-SRCを表示する

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>

出典

2017-10-24 00:40:25

要素に2つの特定のクラスがある場合にのみ関数をトリガーする方法

答えて

関連する問題