im은 html의 모든 이미지에서 src를 가져 와서 예를 들어 number-1과 같은 클래스에 대해 css로 설정 한 다음 모든 img에 대해 css를 설정하는 jquery 코드를 만들려고합니다. visible : hidden; 이전에 div를 추가하고 그 안에 래핑 될 함수를 코딩했습니다. 자동 생성 된 HTML 코드가 있고 모든 페이지를 편집하고 싶지 않습니다.
var a = $('div.gallery > a > img');
for( var i = 0; i < a.length; i+=1 ) {
a.slice(i, i+1).wrapAll('<div class="grid-img"></div>');
}
$('.grid-img').each(function(i){
$(this).addClass('number-' + (i+1));
});
그런 다음 img의 모든 src를 imgBgLink1,2,3,4 변수에 추가하고 클래스 번호 1,2,3,4에 대한 배경 이미지로 설정하십시오.
$("div.gallery a img").each(function(i){
var imgBgLink+'(i+1)' = $(this).attr("src");
$(".number+(i+1)").css("background-image", "url("imgBgLink+(i+1)")";
});
이미지 선택기가 잘못되었습니다. 수정하십시오.
var a = $('div.gallery > a > img'); // 이미지가 앵커 태그 안에 있음
또한 아래와 같이 jquery 스크립트를 개선 할 수 있습니다.
$(function(){
$('div.gallery > a > img').each(function(index){
$(this).addClass('number-' + (index+1));
$(this).wrapAll('<div class="grid-img"></div>');
});
});
수정 : 수정 된 게시물에 따라 업데이트 됨
$(function(){
$('div.gallery > a > img').each(function(index){
var num = parseInt(index)+1;
var imageBG = $(this).attr('src')+num;
$(this).wrapAll('<div class="grid-img number-'+num+
'" style="background-image: url('+imageBG+')"></div>');
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다