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 코드를 감싸기 위해 함수가 필요하지 않을 수도 있습니다.
이렇게 축소판 그림을 가리키면 주요 제품 이미지가 업데이트되고 '
축소판 가져 오기에서 displayImage()라는 함수가 호출됩니다. 메인 포스트에 코드 :) – IntricatePixels
첫째로, 화제 떨어져 GetElementsByClassName'는 IE에서 지원되지 않는다는 것을 알고 있습니까? 어쨌든, 당신이 지금하고있는 것을 보았습니다. 추가 매개 변수 솔루션은 그렇게 작동하지 않습니다. 이 문제는'.change()'이벤트가 루프에서 한 번만 발생하므로'for' 루프와 관련이없는 것 같습니다. 대신 (내가 이해한다면) 문제는 애니메이션이 완료되기 전에 사용자가 하나의 축소판에서 다른 축소판으로 빠르게 이동할 수 있다는 것입니다. 만약 소리가 맞다면,'fadeIn/Out' 호출과 함께'.stop()'또는'stop (true, true)'를 사용해보십시오. – user113716