通過編寫適當的javascript函數來簡化我的代碼

我有關於將參數傳遞給函數波紋管的以下問題。通過編寫適當的javascript函數來簡化我的代碼

它目前做的方式：

當鼠標懸停它我有兩個圖像之間的過渡效果。我需要每個圖像1個功能，因爲每個圖像的路徑不同，我使用不同的類來區分所有圖像。

的Javascript：

</script>  
    $(function() { 
    $(".fade_image1") 

    .find("span") 
     .hide() 
     .end() 
     .hover(function() { 
      $(this).find("span").stop(true, true).fadeIn(); 
     }, function() { 
      $(this).find("span").stop(true, true).fadeOut(); 
     }); 
    }); 
    $(function() { 
    $(".fade_image2") 

     .find("span") 
     .hide() 
     .end() 
     .hover(function() { 
      $(this).find("span").stop(true, true).fadeIn(); 
        }, function() { 
      $(this).find("span").stop(true, true).fadeOut(); 
     }); 
    }); 
</script>

HTML：

<div> 
    <a href="#" class="fade_image1">Image<span></span></a> 
</div> 
<div> 
    <a href="#" class="fade_image2">Image<span></span></a> 
</div>

CSS：

.fade_image1{ 
display: inline-block; 
position: relative; 
text-indent: -9999px; 
width: 303px; 
height: 605px; 
background: url(images/20130128_UK_Colour-Campaign_cropped_02.jpg) no-repeat; 
} 
.fade_image1 span { 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
background: url(images/images-rollover/20130128_UK_Colour-Campaign_cropped-rollover_02.jpg) no-repeat; 
/*background-position: -50px 0;*/ 
} 
.fade_image2{ 
display: inline-block; 
position: relative; 
text-indent: -9999px; 
width: 608px; 
height: 302px; 
background: url(images/20130128_UK_Colour-Campaign_cropped_03.jpg) no-repeat; 
} 
.fade_image2 span { 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
background: url(images/images-rollover/20130128_UK_Colour-Campaign_cropped-rollover_03.jpg) no-repeat; 
/*background-position: -50px 0;*/ 
}

因此，這裏是我的問題，我怎樣才能通過只有1 javascript函數的工作簡化這個所有的圖像？我明白我需要的圖像的路徑傳遞到函數，然後我可以使用jQuery的CSS的東西，但我不知道更多:)

所以請幫我:)

來源

2013-02-04 nocrack

這應該滿足您的需求：

$(function() { 

    function setupFade(selector) { 
     $(selector) 
     .find("span") 
     .hide() 
     .end() 
     .hover(function() { 
      $(this).find("span").stop(true, true).fadeIn(); 
     }, function() { 
      $(this).find("span").stop(true, true).fadeOut(); 
     }); 
    } 

    setupFade(".fade_image1"); 
    setupFade(".fade_image2"); 

});

一個單一setupFade功能，但兩個電話。

來源

2013-02-04 09:00:29 sp00m

謝謝！它工作得很好，但我更喜歡更多類的解決方案，因爲我可能最終會以20個電話結束，否則:) – nocrack

這裏有兩種選擇：

只是一個類添加到您的圖像，並使用此功能：

$(function() { 
$(".fade_images") 
    .find("span") 
    .hide() 
    .end() 
    .hover(
     function() { 
      $(this).find("span").stop(true, true).fadeIn(); 
     }, function() { 
      $(this).find("span").stop(true, true).fadeOut(); 
     } 
    ); 
});

新增類：

<a href="#" class="fade_image1 fade_images">Image<span></span></a>

或者，檢查課程開始的標籤<a>與"fade_image"，而不是所有的圖像添加一類：

$(function() { 
$('a[class^=fade_image]') //<-- for all <a> tags whom class starts with `fade_img`. use *= instead of ^= if you need to filter for "Contains" instead of "Starts with". 
    .find("span") 
    // Etc...

來源

2013-02-04 09:01:09 Cerbrus

現在就試試這個。謝謝！ – nocrack

在這種情況下，您可以考慮接受我的答案，而不是您未使用的答案@ user2027550？ – Cerbrus

通過編寫適當的javascript函數來簡化我的代碼

回答

相關問題