여러 요소에 스크립트 실행

나는 5 개의 img 요소를 가지고 있는데, 각각은 ".backgroundImage"클래스를 가지고있다. 아래 스크립트는 그것을 중심으로합니다. 스크립트를 5 번이나 작성하지 않고 모든 개인 img에서 스크립트를 수행하도록 스크립트에 지시하려면 어떻게해야합니까?여러 요소에 스크립트 실행

function resize(){ 
    var imageWidth = $('.backgroundImage').width(); 
    var imageHeight = $('.backgroundImage').height(); 

    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 

    if(imageWidth>windowWidth){ 
     var newWidth = -(imageWidth - windowWidth)/2; 
     $('.backgroundImage').css('margin-left', newWidth); 
    }; 

    if(imageHeight>windowHeight){ 
     var newHeight = -(imageHeight - windowHeight)/2; 
     $('.backgroundImage').css('margin-top', newHeight); 
    }; 
};

스크립트가 말했다, 이제 변수

function resize(selector){ 
    var imageWidth = $(selector).width(); 
    var imageHeight = $(selector).height(); 

    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 

    if(imageWidth>windowWidth){ 
     var newWidth = -(imageWidth - windowWidth)/2; 
     $(selector).css('margin-left', newWidth); 
    }; 

    if(imageHeight>windowHeight){ 
     var newHeight = -(imageHeight - windowHeight)/2; 
     $(selector).css('margin-top', newHeight); 
    }; 
};

를 전달하여

출처

2014-04-17 user980018

['.each()'(http://api.jquery.com/ 각 /) 귀하의 [이전 질문] (http://stackoverflow.com/questions/7907799/jquery-with-several-elements-issue) –

에 대한 허용 대답에 사용 된 것과 마찬가지로 각 요소에 CSS를 적용해야합니다. 당신은 이미 그것을 코딩했습니다. @cookiemonster - .each()는 필요 없습니다. – j08691

@ j08691 : 각 요소마다 '너비/높이'가 다를 수 있습니다. 지금 그는 처음 발견 된 폭과 높이를 얻고 있습니다. –

document.ready과 window.resize에 트리거, 선택기를 조회 할 이유가 없다 너무 자주 :

function resize(selector){ 
    var $image = $(selector); 
    var imageWidth = $image.width(); 
    var imageHeight = $image.height(); 

    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 

    if(imageWidth>windowWidth){ 
     var newWidth = -(imageWidth - windowWidth)/2; 
     $image.css('margin-left', newWidth); 
    }; 

    if(imageHeight>windowHeight){ 
     var newHeight = -(imageHeight - windowHeight)/2; 
     $image.css('margin-top', newHeight); 
    }; 
}; 

resize('.backgroundImage');

출처

2014-04-17 17:35:18

원래와 어떻게 다른가요? 당신은 여전히 셀렉터가 찾은 첫 번째 요소의'width'와'height' 만 가져옵니다. –

사실, 선택기를 전달하는 중, 필요로하는 각 이미지에 대해 함수의 사본 한 개를 보유하고 있습니다. –

조작해야 할 각 요소가 선택기와 일치한다는 것이 문제입니다. 즉, .backgroundImage는 5 요소를 반환하고 OP는 어떻게 든 각 요소에 대해 별도의 함수를 작성해야한다고 생각했습니다. 대신 그는 각 개별 요소를 다루기 위해 하나의 selector에서'.each() '를 사용해야합니다. –

$ .each를보십시오. 뭔가 같은 :

$('.backgroundImage').each(function(index, value){ 
    var width = $(value).width(); 
    var height = $(value).height(); // Value is each individual img element 

    // do your resizing on each value as necessary 
})

출처

2014-04-17 17:37:16 jvanstry

또는'$ ('backgroundImage'). 각 (...)' –

당신은 다음과 같은 jQuery 플러그인을 쓸 수있어

(function ($) { 
    $.fn.centerImage = function() { 
    var operations = { 
     resize: function() { 
      var windowWidth = $(window).width(), 
       windowHeight = $(window).height(), 
       imageWidth = this.width(), 
       imageHeight = this.height(); 

      if (imageWidth > windowWidth) { 
       var newWidth = -(imageWidth - windowWidth)/2; 
       this.css('margin-left', newWidth); 
      } 

      if (imageHeight > windowHeight) { 
       var newHeight = -(imageHeight - windowHeight)/2; 
       this.css('margin-top', newHeight); 
      } 
     } 
    }; 

    return this.each(function() { 
     var ele = $(this); 
     $(window).resize(function() { 
      operations.resize.apply(ele, []); 
     }); 
    }); 
}; 
})(jQuery); 

Then you can call this as, 

$(document).ready(function(){ 
    $('.backgroundImage').centerImage(); 
});

모든

출처

2014-04-17 17:53:29

여러 요소에 스크립트 실행

답변

관련 문제