반복되는 JQuery 코드

Question

많은 미리보기 이미지가있는 큰 이미지가있는 페이지가 있습니다. 미리보기 이미지 위에 마우스를 올리면 주 이미지가 방금 마우스를 굴려 놓은 이미지로 바뀝니다. 문제는 내가 갖고있는 미리보기 이미지가 많을수록 반복되는 코드가 많아집니다. 어떻게 줄일 수 있습니까?

Jquery 코드는 다음과 같습니다.

<script type="text/javascript"> 
    $('#thumb1') 
.mouseover(function(){ 
$('#big_img').fadeOut('slow', function(){ 
$('#big_img').attr('src', '0001.jpg'); 
$('#big_img').fadeIn('slow'); 
      }); 
     }); 
    $('#thumb2') 
     .mouseover(function(){ 
      $('#big_img').fadeOut('slow', function(){ 
       $('#big_img').attr('src', 'p_0002.jpg'); 
       $('#big_img').fadeIn('slow'); 
      }); 
     }); 
    $('#thumb3') 
     .mouseover(function(){ 
    $('#big_img').fadeOut('slow', function(){ 
       $('#big_img').attr('src', '_img/p_0003.jpg'); 
       $('#big_img').fadeIn('slow'); 
      }); 
     }); 
    $('#thumb4') 
     .mouseover(function(){ 
      $('#big_img').fadeOut('slow', function(){ 
       $('#big_img').attr('src', '0004.jpg'); 
       $('#big_img').fadeIn('slow'); 
      }); 
     }); 
</script> 

#big_img는 전체 크기 이미지의 ID를 = 축소판

이 도움이 경우 페이지의 주요 코드는 PHP입니다의

#thumb1, #thumb2, #thumb3, #thumb4 = 아이디입니다.

Answer 1

먼저 모든 축소판이 '클래스'를 쉽게 찾을 수 있도록 코드를 수정해야합니다.

당신은 당신이 모든 당신 축소판과 큰 이미지 상대방 사이의 식별 가능한 패턴을 가지고 있는지 확인해야합니다 당신이

<img id="thumb1" scr=""/> 
<img id="thumb2" scr=""/> 
.. 

당신의 HTML을

<img id="thumb1" class='thumb' scr=""/> 
<img id="thumb2" class='thumb' scr=""/> 
.. 

둘째 같아야있는 가정. 귀하의 코드에

0001.jpg 
p_0002.jpg 
_img/p_0003.jpg 
0004.jpg 

파일에 대한 귀하의 조직은 무엇입니까?

의 축소판이 버그 이미지와 같은 SRC을 가지고 지금 가정 해 봅시다

JQuery와 코드에 수축 될 것이다 :

이

$('.thumb').mouseover(function(){ 

    var thumb_src = $(this).attr('src'); 

    // ==> add code here to transform thumb_src into the big_img src 

    $('#big_img').fadeOut('slow', function(){ 
     $('#big_img').attr('src', thumb_src); 
     $('#big_img').fadeIn('slow'); 
    }); 
}); 

이 코드가 작동해야하며, 그 변환 알고리즘을 기다립니다 단지

내가이 도움이되기를 바랍니다 큰 이미지의 SRC에 엄지 손가락의 SRC 당신 제롬 와그너

Answer 2

내가 생각하는 함수를 작성할 수 있습니다.

applyImageFade('#thumb1','0001.jpg'); 
applyImageFade('#thumb2','p_0002.jpg'); 
//etc... 

function applyImageFade(thumbId, image) { 
    $(thumbId).mouseover(function(){ 
     $('#big_img').fadeOut('slow', function(){ 
      $('#big_img').attr('src', image); 
      $('#big_img').fadeIn('slow'); 
     }); 
    }); 
} 

Answer 3

$(this)은 친구입니다. 또한 파일 이름과 ID를 일치시키는 데 사용할 수있는 일종의 명명법을 개발해야합니다. 확실히

$('.thumb').mouseover(function() { 
    var link = $(this).attr('rel'); 

    /* Now that you have the link, just put it into whatever function you need to */ 
}); 

Fehays 방법 : 그럼 다음 단계에 대해 갈거야

// PHP GeneratedContent 

<?php 

while(/* some range */) { 
    $i = 1; 
    $output .= '<element class="thumb" rel="p_' . $i . '.jpg">'; 
    $i++; 
} 

echo $output; 
?> 

: 내가 평소하면 HTML을 생성하는 PHP를 사용하지만, 파일 이름을 처리 할 특별한 속성에 넣어 작동하지만, 이런 식으로, 당신은 불필요한 ID의 톤을 가지지 않을 것이며, 불필요한 매개 변수 전송을 할 필요가 없습니다. 클래스 thumb을 사용하여 DOM의 모든 인스턴스에 자동으로 전파됩니다.

Answer 4

난 당신이 할 수있는 가장 깨끗한 것은 당신이 원하는 기능을 포함하도록 jQuery를 확장 할 수있을 거라고 생각 :

이

//random images pulled off of Google Image Search 
src1 = "http://www.o3mobi.com/jquery.jpg"; 
src2 = "http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg"; 

$.fn.fadeToSrc = function(src, speedOut, speedIn, callback) { 
    return this.fadeOut(speedOut, function() { 
     $(this).attr('src', src).fadeIn(speedIn, callback); 
    }); 
}; 

$("#image").click(function() { 
    $(this).fadeToSrc(src2, 1000, 4000); 
}); 

당신은 여기를 테스트 할 수 있습니다! http://jsfiddle.net/jPYyZ/

====== 업데이트 =======

당신이 마우스 오버 썸네일/미리보기 시스템을 수행 할 경우,이 걸리는 전부입니다 :

//HTML 
<img class="thumbnail" src="http://www.o3mobi.com/jquery.jpg"> 
<img class="thumbnail" src="http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg"> 
<img id="fullsized"> 


//CSS 
​.thumbnail { 
    width: 5em; 
    height: 5em; 
} 

#fullsized { 
    width: 10em; 
    height: 10em; 
    border: 2px solid red; 
}​ 


//JAVASCRIPT 
$.fn.fadeToSrc = function(src, speedOut, speedIn, callback) { 
    return this.fadeOut(speedOut, function() { 
     $(this).attr('src', src).fadeIn(speedIn, callback); 
    }); 
}; 

$(".thumbnail").mouseover(function() { 
    var newsrc = $(this).attr("src"); 
    $("#fullsized").fadeToSrc(newsrc, 1000, 1000); 
}); 

당신 여기에 이걸 가지고 테스트/팅커를 할 수 있습니다 : http://jsfiddle.net/AhwH7/