2010-12-19 2 views
2

UPDATE :jQuery를/자바 스크립트 - 실행 기능 번만

엄지 손가락 이미지 태그 호버이 displayImage라는 함수()를 호출 :

function displayImage(index, parent){ 
    var images = document.getElementById(parent).getElementsByClassName("mainProductImage"); 

    for(var i = 0; i < images.length; i++) { 
     var image = images[i]; 
     if (image.className != 'mainProductImage') { continue } 
     if(i == index-1) { 
      // display main image 
     image.style.display="block"; 
      // change selectedIndex of select list 
     jQuery("#mySelect").attr('selectedIndex', index-1); 
     jQuery('#mySelect').trigger('change', [ i ]);   
     } 
     else { 
     image.style.display="none"; 
     }  
    } 
} 

을 나는 매우 잘 설명하지 않았다 실현 :) 마우스를 가져 가면 페이지의 주요 제품 이미지가 변경되는 이미지 축소판이 n ​​개 있습니다. 썸네일 마우스 오버 이벤트는 동일한 페이지의 선택 목록에 trigger()를 보냅니다 (3 개의 이미지가있는 경우 선택 목록에 3 개의 해당 제품 항목이있는 n 개의 제품이있는 드롭 다운). 그런 다음

jQuery('#mySelect').trigger('change', [ i ]); // now passing the i variable 

나는 추가 : 내가 프리스트 루프이 추가 패트릭의 제안을 바탕으로

하나는 썸네일을 놓을 때

$('#mySelect').change(function(event, idx) { 
if(idx === 0) { 
    $('#fade').fadeOut('fast'); 
    $('#fade').fadeIn('slow'); 
} 

이 코드는 이제 이미지의 수를 때 페이드 제한하고 미리보기 이미지에 마우스를 올렸지 만 한 번만 아니라 몇 가지 이유 때문에 두 번 사라집니다.

선택 목록에서 제품 항목을 변경할 때 이미지 페이드 효과가 발생하기를 원하지만 .change() 함수가 루프 배열에서 [i]를 인식하지 못하므로 지금 작동하지 않습니다. 따라서 축소판을 가리거나 제품 선택 목록 항목을 변경할 때 페이드를 유발하는 솔루션이 필요합니다.

저는 이것이 약간의 의미가 있기를 바랍니다.


jQuery 코드를 일반 자바 스크립트 함수 내에서 한 번만 실행하는 방법이 있습니까?

페이지의 다른 이벤트를 기반으로 이미지 전환 목적으로 호출되는 fadeImage() 함수가 있습니다. 이러한 이벤트 중 하나는 for 루프에서 트리거됩니다. 루프로 인해 함수가 여러 번 호출되기 때문에 루프가 완료 될 때까지 이미지의 페이드 인 및 페이드 아웃이 반복됩니다. 루프 내부에서 페이딩 효과를 해고해야하지만 루프 영역에서 아무 것도 변경하지 않고 페이딩 기능을 한 번만 실행 시키길 바랬습니다.

시도했지만 행운은 .one()입니다.

function fadeImage() 
{ 
    // is there a way to run these two lines only once? 
    $('#fade').fadeOut('fast'); 
    $('#fade').fadeIn('slow'); 
} 

많은 의견을 보내 주시면 감사하겠습니다. 또는 다른 아이디어, 아마 jQuery 코드를 감싸기 위해 함수가 필요하지 않을 수도 있습니다.

+0

이렇게 축소판 그림을 가리키면 주요 제품 이미지가 업데이트되고 '