올바른 자바 스크립트 함수를 코딩하여 코드 단순화

Question

매개 변수를 함수에 전달하는 것과 관련된 다음 질문을 갖게되었습니다.

이 순간에 이루어집니다 방법 : 마우스를 유혹 할 때

나는 두 이미지 사이의 전환 효과를 가지고있다. 각 이미지의 경로가 다르므로 모든 이미지를 구분하기 위해 다른 클래스를 사용하므로 이미지 당 1 개의 함수가 필요합니다.

자바 스크립트 :

</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 : 내가 일하는 단지 1 자바 스크립트 기능을 구비하여이 작업을 단순화 할 수있는 방법 그래서 여기

.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;*/ 
} 

내 질문은, 모든 이미지? 나는 함수에 전달 될 다음 나는 JQuery와의 CSS는 물건을 사용할 수있는 이미지의 경로를해야 이해하지만 좀 더 모르는 :)

이

그래서 저를 도와주세요 :)

Answer 1

이것은 당신의 요구에 맞게해야합니다

$(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 기능 만이 전화를. ,

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

---

또는 :

그냥 이미지에 클래스를 추가하고,이 기능을 사용합니다 :

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

추가 클래스를

Answer 2

는 다음 두 가지 옵션이 있습니다 수업이 시작되는 곳의 <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...