2013-07-12 2 views
1

jQuery에서 상위 경로를 추적하는 더 나은 방법을 묻고 싶습니다. 현재이 작업을 수행하고 있습니다. jquery에서 부모 경로를 변수로 만들기

$('.qBox em a').hover(
    function(){ 
     $(this).parent().parent().find('.overlayIMG').fadeIn(100); 
    }, 
    function(){ 
     $(this).parent().parent().find('.overlayIMG').fadeOut(100); 
    } 
); 

는하지만 이런 식으로 뭔가를 (아래 코드는 내가 모르는 어떤 이유로 작동하지 않습니다)하고 싶었다. 이 문제를 올바르게 검색하는 방법을 잘 모르겠습니다. 이미 부모님과 부모 경로를 추적했지만 답을 찾을 수 없으므로 잠시 걱정할 것입니다.
$('.qBox em a').hover(
    var biggerImage = $(this).parent().parent().find('.overlayIMG'); 
    function(){ 
     biggerImage.fadeIn(100); 
    }, 
    function(){ 
     biggerImage.fadeOut(100); 
    } 
); 

당신은 당신이 그것을 완료 한 장소에서 변수를 선언 할 수없는 HTML 마크 업

<div class="qBox"> 
    <em> 
      <img src="images/homepagethumbOL.png" class="overlayedIcon"> 
      <a href="#"><img src="images/sample_box.jpg"></a> 
    </em> 
    <span> 
     <h3><a href="#">Article Title Looks Like This or Longer</a></h3> 
     <p>Curabitur zblandit tempus porttitor. Donec ullamcorper.</p> 
     <a href="#">view <i>45</i> comments</a> 
     </span> 
    <img src="images/sampleBig.jpg" class="overlayIMG one"> 
</div> 
+0

HTML 태그를 공유하시기 바랍니다 우리가 두 번째 옵션은 –

+0

무언가를 제안 할 수 있도록. 나는 그것을 할 수있는 적절한 방법을 모른다. :) –

+0

그래, 그건 내 문제의 구문이 잘못 – janharold

답변

3

당신은 요소를 반복 한 번만 .overlayIMG을 찾기 위해 each()를 사용할 수 있습니다

$('.qBox em a').each(function(){ 
    var overlay = $(this).parent().parent().find('.overlayIMG'); 

    $(this).hover(
     function(){ 
      $(overlay).fadeIn(100); 
     }, 
     function(){ 
      $(overlay).fadeOut(100); 
     } 
    ); 
}); 
+0

이것은 매력처럼 작동합니다. 저는 오래된 방법을 꽤 오랫동안 사용 해왔고 정말 부정하다고 생각합니다. 그래서 여기에서 물어보기로했습니다. 고마워요! 답을 감사하십시오! – janharold

0

- 그것은 구문 적으로 잘못된입니다. 그러나 호버 스코프 외부에서 선언하면 this 키워드를 사용할 수 없습니다.

당신은 jQuery의 data() 기능을 사용 할 수 :

$('.qBox em a').hover(
function() 
{ 
    var data = $(this).data(this, "data"); 
    if (data.img == undefined) 
    { 
     data = { img: $(this).parent().parent().find('.overlayIMG') }; 
     $(this).data(this, "data", data); 
    } 

    $(data.img).fadeIn(100); 
}, 
function() 
{ 
    var data = $(this).data(this, "data"); 
    $(data.img).fadeOut(100); 
}); 

이것은 a에 대한 이미지 참조를 저장하지만 호버 기능이 해고되는 경우에만 저장합니다.

관련 문제