루프에서 단 하나의 작은 차이 만 제외하고 jquery 스크립트를 대량으로 추가하는 방법은 무엇입니까?

Question

여기 코드가 있습니다. 기본적으로 나는 마우스의 위치와 스크롤 위치에 기반하여 엄청난 양의 이미지를 흐릿하게 처리하고 있습니다. 내가 좋아하는 100 개 이미지와 함께이 작업을 수행 할 수 있지만, 나는 다음과 같은 변경 100 번 그냥이 스크립트를 복사하고 싶지 않습니다

var offset[x] = $('#img[x]').offset(); 

다음 공식 :

'filter': 'blur(' + ((Math.abs(offset[x].top - e.pageY) - 30)/20) + 'px)', 

그리고 곧.

루프에서이 작업을 수행 할 수 있습니까?

다음은 현재 가지고있는 것들입니다.

$(document).on('mousemove', function(e){ 
    var offset1 = $("#img1").offset(); 
    var offset2 = $("#img2").offset(); 
    $("div.c").html(Math.abs(offset1.top - e.pageY)); 
    $('#img1').css({ 
     'filter': 'blur(' + ((Math.abs(offset1.top - e.pageY) - 30)/20) + 'px)', 
      '-webkit-filter': 'blur(' +((Math.abs(offset1.top - e.pageY) - 30)/20) + 'px)', 
      '-moz-filter': 'blur(' +((Math.abs(offset1.top - e.pageY) - 30)/20) + 'px)', 
      '-o-filter': 'blur(' + e.pageY - offset1.top + 'px)', 
      '-ms-filter': 'blur(' + ((Math.abs(offset1.top - e.pageY) - 30)/20) + 'px)' 
    }); 
    $('#img2').css({ 
     'filter': 'blur(' + ((Math.abs(offset2.top - e.pageY) - 30)/20) + 'px)', 
      '-webkit-filter': 'blur(' +((Math.abs(offset2.top - e.pageY) - 30)/20) + 'px)', 
      '-moz-filter': 'blur(' +((Math.abs(offset2.top - e.pageY) - 30)/20) + 'px)', 
      '-o-filter': 'blur(' + e.pageY - offset2.top + 'px)', 
      '-ms-filter': 'blur(' + ((Math.abs(offset2.top - e.pageY) - 30)/20) + 'px)' 
    }); 
}); 

고마워요!

Answer 1

당신은 당신이 모든 이미지를 직접 선택할 수의 #ID를 사용하여 jQuery를을 선택하는 대신에 하나 개의 이미지의 .each()

$(document).on('mousemove', function(e){ 
    $("img").each(function(index) { 
     // Do it for each image 
     var currentImage = $(this); 
     var offset = currentImage.offset(); 

     currentImage.css({ 
     'filter': 'blur(' + ((Math.abs(offset.top - e.pageY) - 30)/20) + 'px)', 
     '-webkit-filter': 'blur(' +((Math.abs(offset.top - e.pageY) - 30)/20) + 'px)', 
     '-moz-filter': 'blur(' +((Math.abs(offset.top - e.pageY) - 30)/20) + 'px)', 
     '-o-filter': 'blur(' + e.pageY - offset.top + 'px)', 
     '-ms-filter': 'blur(' + ((Math.abs(offset.top - e.pageY) - 30)/20) + 'px)' 
     }); 
    }); 
}); 

를 사용하거나 선택하고 반복) (.each 사용하고자하는 사람에 클래스를 추가 할 수 있습니다 선택한 모든 요소에 적용됩니다.