특정 클래스가 두 개인 경우에만 요소에서 함수를 트리거하는 방법

-2

모든 '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;

현재 페이지가로드 될 때 트리거됩니다.

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

.hidden 디스플레이를 할당 : 내가 원하는 것은이 요소 모두가 같이

를 요소가 두 클래스는 .lazy이있는 경우에만 트리거 및 .show하기위한 것도, .show 디스플레이가 없습니다 : 차단하고, 'show'와 .removeClass 'hidden'을 추가하는 다양한 클릭이 있습니다.

나는

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

의 다양한 조합으로 주위를 해본 적이 있지만 분명히 내가했던 생각이 동작하지 않습니다보다 더 적은 이해합니다.

두 개의 특정 클래스가있는 요소가있는 경우 함수를 트리거하고 해당 요소에만 함수를 적용하려면 어떻게합니까?

항상 두 클래스를 찾고 .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'행을 추가하여 각 이미지에 대해 한 번만 트리거되도록했습니다. 고맙습니다 @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

특정 클래스가 두 개인 경우에만 요소에서 함수를 트리거하는 방법

답변

관련 문제