循環中動態父元素的引用子代

當將鼠標懸停在.portrait我騎自行車穿過它的子圖像。這項工作很好，但只有在頁面上只有1個實例.portrait。我怎樣才能改變$（ 'PIMG'）。EQ（CURRENTITEM） ...動態引用的目前徘徊，在.portrait元素的孩子嗎？循環中動態父元素的引用子代

<script> 
var itemInterval = 600; 
var numberOfItems = $('.portrait img').length;   
var currentItem = 0; //set current item 
var infiniteLoop; 
$('.portrait').hover(function() { 
    infiniteLoop = setInterval(function(){       

     // line below fails, but describes what I'm trying to do       
     // $(this).children('img').eq(currentItem).hide(); 

     //line below works, but not if there is more 
     // than 1 .portrait on the page  
     $('.pimg').eq(currentItem).hide(); 

     if(currentItem == numberOfItems -1){ 
      currentItem = 0; 
     }else{ 
      currentItem++; 
     } 
     $('.pimg').eq(currentItem).show(); 
    }, itemInterval); 
}, 
function() { 
    clearInterval(infiniteLoop); 
}); 
</script> 

<div id="portrait1" class="portrait portrait-a"> 
    <img class="pimg" src="img1.jpg" alt="" /> 
    <img class="pimg" src="img2.jpg" alt="" /> 
    <img class="pimg" src="img3.jpg" alt="" /> 
    <img class="pimg" src="img4.jpg" alt="" /> 
    <img class="pimg" src="img5.jpg" alt="" /> 
</div> 
<div id="portrait2" class="portrait portrait-b"> 
    <img class="pimg" src="img6.jpg" alt="" /> 
    <img class="pimg" src="img7.jpg" alt="" /> 
    <img class="pimg" src="img8.jpg" alt="" /> 
    <img class="pimg" src="img9.jpg" alt="" /> 
    <img class="pimg" src="img10.jpg" alt="" /> 
</div>

來源

2011-06-28 Jeff

解決：

<html> 
<head> 
    <style type="text/css"> 
     .portrait {float:left;margin: 0 20px 0 0;width:323;height:181;overflow:hidden;} 
     .portrait img {width:323;height:181;} 
    </style> 
</head> 
<body> 

<div class="portrait"> 
    <img src="1.jpg" alt="" /> 
    <img src="2.jpg" alt="" /> 
    <img src="3.jpg" alt="" /> 
    <img src="4.jpg" alt="" /> 
    <img src="5.jpg" alt="" /> 
</div> 
<div class="portrait"> 
    <img src="1.jpg" alt="" /> 
    <img src="2.jpg" alt="" /> 
    <img src="3.jpg" alt="" /> 
    <img src="4.jpg" alt="" /> 
    <img src="5.jpg" alt="" /> 
</div> 
<script src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 

    var itemInterval = 600; 
    var currentItem = 1; 
    var infiniteLoop = false; 

    function startLoop(element){ 
     element.children('img').eq(0).hide(); 
     infiniteLoop = setInterval(function(){ 
      element.children('img').eq(currentItem).hide(); 
      currentItem = ++currentItem % element.children('img').length; 
      foo = element.children('img').eq(currentItem).attr('src'); 
      element.children('img').eq(currentItem).show(); 
     }, itemInterval); 
    } 
    function stopLoop(){ 
     infiniteLoop && clearInterval(infiniteLoop); // shorthand for: if (infiniteLoop) { clearInterval(infiniteLoop) } 
    } 
    function resetLoop(element){ 
     element.children('img').eq(0).show(); 
     element.children('img').eq(1).show(); 
     element.children('img').eq(2).show(); 
     element.children('img').eq(3).show(); 
     element.children('img').eq(4).show(); 
     currentItem = 1; // reset counter 
    } 

    $('.portrait').hover(function() { 
     currentP = $(this); 
     startLoop(currentP); 
    }, 
    function() { 
     stopLoop(); 
     // reset to first image 
     resetLoop($(this)); 
    }); 

}); 
</script> 
</body> 
</html>

來源

2011-06-28 19:17:01 Jeff

循環中動態父元素的引用子代

回答

相關問題