凝聚重複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

#thumb1，縮略圖

這個頁面的主要代碼PHP有沒有什麼幫助的#thumb2，#thumb3，#thumb4 = ID用。

Answer 1

首先，你應該修改你的代碼，以便每個縮略圖都有一個容易找到的'class'。

假設你有

<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。我通常做的是使用PHP來生成HTML，但擺在那處理文件名的特殊屬性：

// PHP GeneratedContent 

<?php 

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

echo $output; 
?> 

然後我會去了解下一個步驟：

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

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

Fehays方法肯定工作，但這樣，你將不會有大量不必要的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/