jQuery .each() 또는 다른 메소드. 어떤 용도로 사용해야합니까?

Question

jQuery 릴 플러그인을 사용하는 360 명의 뷰어가 두 명 있습니다. 두 가지는 클래스를 사용하여 같은 페이지에서 잘 돌아가고 있습니다. 우리는 jQuery UI를 사용하여 줌 기능과 회전 슬라이더를 설정했습니다. 문제는 각 슬라이더 또는 확대/축소 버튼이 부모 이미지를 제어 할 수 없다는 것입니다. 누구든지 도와 줄 수 있습니까? 감사합니다. URL은 http://www.dmns.org/test/jquery-360/index.html입니다. 어떤 도움을 주셔서 감사합니다. 코드는 다음과 같습니다.

var zoomAmount = 100; 
var originalHeight = 0; 
var originalWidth = 0; 
// Slide Bar for the "Zoom" control 
var zoomSlider; 
var totalFrames; 
var isObjectRotatingViaSlider = false; 
var isObjectZoomingViaSlider = false; 
var maxZoomAmount = 2; 
var image = $('.image'); 

$(document).ready(function() { 
var images = $('.imageSequence').attr('value'); 
var imgArray = images.split(','); 
totalFrames = imgArray.length; 
originalHeight = $('.image').height(); 
originalWidth = $('.image').width(); 
var image = $('.image'); 
image.reel(
{ 
    brake: 1, 
    frames: totalFrames, 
    images: imgArray, 
    //preload: totalFrames, 
    cw: true, 
    hint: "Click and drag", 
    clickfree: false, 
    preloader: 20 

}); 

// var wrappingDiv = $('.example'); 
//$(wrappingDiv).each(function() { 
    $('.ZoomIn').on('click', function (e) { 
     ZoomIn(); 
     e.preventDefault(); 
    }); 
    $('.ZoomOut').on('click', function (e) { 
     ZoomOut(); 
     e.preventDefault(); 
    }); 
    $('.DefaultSize').on('click', function (e) { 
     e.preventDefault(); 
     DefaultSize(); 

    }); 

//});//End Each 


//iPad check to show or hide sliders 
var isiPad = navigator.userAgent.match(/iPad/i) != null; 
var isiPhoneOriPod = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) 
var ua = navigator.userAgent.toLowerCase(); 
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile"); 
if (!isiPad && !isAndroid && !isiPhoneOriPod) { 
    // alert('not iPad'); 
    $(".viewerSlider, .instructionMessaging, .desktopMessage").show(); 
    //Rotation sliders 
    ReadyRotationSlider(); 
    ReadyZoomSlider(); 
    SetUpTimer(); 
} else if (isiPad || isAndroid || isiPhoneOriPod) { 
    $('.viewerSlider').hide(); 
    $(".viewerSlider, .instructionMessaging, .mobileMessage").show(); 
    //alert('is an iPad, Android, or iPhone or iPod'); 
} 
else { 
    alert('is an something else'); 
    $('.viewerSlider').show(); 
} 
//maybe get this to play 
$('button').on("click", function() { 
    image.trigger("play"); 
}); 


}); //End doc ready 




function ZoomIn() { 

// Zoom in Image but keep borders the same 
var newWidth = $('.image').width() + zoomAmount; 
var newHeight = $('.image').height() + zoomAmount; 

//Move and zoom the image 
var newX = (originalHeight - newHeight)/2; 
var newY = (originalWidth - newWidth)/2; 

$('.imgHolder').find('img').stop(false, true).animate({ 'width': newWidth, 'height': newHeight, 'top': newX, 'left': newY }, { duration: 200 }); 
} 

function ZoomOut() { 
// Zoom in Image but keep borders the same 
var newWidth = $('.image').width() - zoomAmount; 
var newHeight = $('.image').height() - zoomAmount; 

if (newHeight <= originalHeight || newWidth <= originalWidth) { 
    newHeight = originalHeight; 
    newWidth = originalWidth; 
} 

var newX = (originalHeight - newHeight)/2; 
var newY = (originalWidth - newWidth)/2; 

$('.imgHolder').find('img').stop(false, true).animate({ 'width': newWidth, 'height': newHeight, 'top': newX, 'left': newY }, { duration: 200 }); 
} 

function DefaultSize() { 
$('.imgHolder').find('img').stop(false, true).animate({ 'width': originalWidth, 'height': originalHeight, 'top': 0, 'left': 0 }, { duration: 200 }); 
} 

function FreeZoom(amount) { 

// Zoom in Image but keep borders the same 
var newWidth = originalWidth * ((100 + amount)/100); 
var newHeight = originalHeight * ((100 + amount)/100); 

var newX = (originalHeight - newHeight)/2; 
var newY = (originalWidth - newWidth)/2; 

$('.imgHolder').find('img').stop(false, true).animate({ 'width': newWidth, 'height': newHeight, 'top': newX, 'left': newY }, { duration: 200 }); 
} 

//Rotation Sliders 

function SetUpTimer() { 
setInterval('UpdateImageViaSliders()', 50); 
} 

function UpdateImageViaSliders() { 
if (isObjectRotatingViaSlider) { 
    RotateViaSlider($('.rotationSlider').slider("value")); 
} else if (isObjectZoomingViaSlider) { 
    FreeZoom($('.zoomSlider').slider("value")); 
} 
} 

function ReadyRotationSlider() { 
$(".rotationSlider").slider({ 
    slide: function (event, ui) { 
     isObjectRotatingViaSlider = true; 
    }, 
    stop: function (event, ui) { 
     isObjectRotatingViaSlider = false; 
    } 
}); 
} 

function ReadyZoomSlider() { 
$(".zoomSlider").slider({ 
    slide: function (event, ui) { 
     isObjectZoomingViaSlider = true; 
    }, 
    stop: function (event, ui) { 
     isObjectZoomingViaSlider = false; 
    } 
}); 
} 

function RotateViaSlider(rotateNumber) { 
var newFrame = Math.floor((rotateNumber * totalFrames)/100); 
$('.image').trigger('frameChange', newFrame); 
} 

HTML에는 두 세트가 있습니다.

<div class="example"> 
    <div class="block"> 
     <div class="imgHolder"> 
      <img class="image" src="images/smooshed150dpi/Kachina0001.png" height="448" width="360" /> 
     </div> 
    </div> 
    <div class="instructionMessaging"> 
     <p class="mobileMessage"> 
      Swipe to spin image</p> 
     <p class="desktopMessage"> 
      Click and drag left and right to spin image</p> 
    </div> 
    <div class="controlsWrapper"> 
     <!--<div id="ZoomIn"> 
         Zoom In 
        </div>--> 
     <a href="#" class="ZoomIn controlBtn">(+) Zoom In</a> 
     <!--<div id="ZoomOut"> 
         Zoom Out 
        </div>--> 
     <a href="#" class="ZoomOut controlBtn">(-) Zoom Out</a> <a href="#" class="DefaultSize controlBtn"> 
      Default size</a> 
     <div class="viewerSlider"> 
      <span>Rotate</span> 
      <div class="rotationSlider"> 
      </div> 
     </div> 
     <div class="viewerSlider"> 
      <span>Zoom</span><div class="zoomSlider"> 
      </div> 
     </div> 
    </div> 
    <input type="hidden" class="imageSequence" name="imageSequence" value="images/smooshed150dpi/Kachina0001.png,images/smooshed150dpi/Kachina0002.png,images/smooshed150dpi/Kachina0003.png,images/smooshed150dpi/Kachina0004.png,images/smooshed150dpi/Kachina0005.png,images/smooshed150dpi/Kachina0006.png,images/smooshed150dpi/Kachina0007.png,images/smooshed150dpi/Kachina0008.png,images/smooshed150dpi/Kachina0009.png,images/smooshed150dpi/Kachina0010.png,images/smooshed150dpi/Kachina0011.png,images/smooshed150dpi/Kachina0012.png,images/smooshed150dpi/Kachina0013.png,images/smooshed150dpi/Kachina0014.png,images/smooshed150dpi/Kachina0015.png,images/smooshed150dpi/Kachina0016.png,images/smooshed150dpi/Kachina0017.png,images/smooshed150dpi/Kachina0018.png,images/smooshed150dpi/Kachina0019.png,images/smooshed150dpi/Kachina0020.png,images/smooshed150dpi/Kachina0021.png,images/smooshed150dpi/Kachina0022.png,images/smooshed150dpi/Kachina0023.png,images/smooshed150dpi/Kachina0024.png,images/smooshed150dpi/Kachina0025.png,images/smooshed150dpi/Kachina0026.png,images/smooshed150dpi/Kachina0027.png,images/smooshed150dpi/Kachina0028.png,images/smooshed150dpi/Kachina0029.png,images/smooshed150dpi/Kachina0030.png,images/smooshed150dpi/Kachina0031.png,images/smooshed150dpi/Kachina0032.png,images/smooshed150dpi/Kachina0033.png,images/smooshed150dpi/Kachina0034.png,images/smooshed150dpi/Kachina0035.png,images/smooshed150dpi/Kachina0036.png,images/smooshed150dpi/Kachina0037.png" /> 
</div> 

Answer 1

컨트롤은 단지 그들이 말을하는지 일을 :

$('.element').doStuff(); 
// doStuff is just a fake generic function 

컨트롤 클래스 "요소"그들에게 변경 사항을 적용과 모든 요소를 ​​찾아 내고있다. 어떤 경우에는 요소가 컨트롤 자체입니다 (예 : 클래스 .ZoomIn의 모든 컨트롤은 똑같은 일을합니다 ... 동일한 동일한 것을 의미하며, 바인딩중인 이벤트의 관점에서 서로 중복됩니다.) 어떤 경우에는 목표입니다 (예 : .image의 모든 이미지가 영향을받습니다).

개별적으로 작동하도록하려면 코드를 구분하는 몇 가지 방법으로 코드를 수정해야합니다. 가장 쉬운 방법은 Div의 일종의 이미지와 컨트롤의 각 "세트"를 래핑하는 것입니다. 우리는 자신을 제한 할 것이기 때문에 div는 고유 할 필요조차 없습니다. 전체 플러그인은 스택 오버플로 대답의 범위를 벗어

$('.someButton').click(function() { 
    var $this = $(this); 
    var theImage = $this.closest('.parentDiv').find('.image'); // parentDiv is the classname of the mini wrapper 
    theImage.doStuff(); // will only affect the image(s) inside the mini wrapper 
}); 

고정,하지만 난이 당신에게 잘못 무슨 일이 일어나고 있는지에 대한 이해를 제공 희망 : 같은

일반적인 예를 볼 수 있습니다. $('.image')과 같은 선택기가 해당 클래스 이름을 가진 모든 노드를 가져 오는 소스 코드를보고있을 때를 기억하십시오.