僅針對指定元素的問題

Question

我一直在研究一個小的jQuery插件，它可以在鼠標懸停在圖像上時創建類似iPhoto的預覽。如果我只有一組圖像，這一切都很好。只要我爲標記添加多個.preview設置，我的插件就會查找所有這些標記，並在每個圖像下方顯示指標總數。

這裏是JS：

$(document).ready(function() { 
    // launch preview browser 
    $('.preview').previewBrowser(); 
}); 

(function($) { 
    $.fn.previewBrowser = function() { 
     return this.each(function() { 
      // get dom 
      var $viewport = $(this).css('overflow', 'hidden'), 
       $container = $viewport.children('ul'), 
       $items = $container.children('li'), 
       $single = $items.filter(':first'); 

      // set viewport to correct size 
      $viewport.css({ height: $single.height(), width: $single.width() }); 

      // set container to correct width 
      $container.css({ height: $single.height(), width: $items.length * $single.width() }); 

      // float items 
      $items.css({ float: 'left' }); 

      // add indicator to dom 
      var indicator = ''; 

      for (i = 0; i < $items.length; i++) { 
       indicator += '<li class="left">O</li>'; 
      } 

      $(indicator).appendTo('.indicator'); 

      // set default indicator 
      $('.indicator li:eq(0)').css('color', 'red'); 

      // set scrolling position while mouseover 
      $viewport.bind('mousemove.previewBrowser', function(evt) { 
       x = evt.pageX - this.offsetLeft; 

       offset = Math.floor(x/($single.width()/$items.length)) * $single.width(); 

       $(this).animate({ scrollLeft: offset }, 1); 

       // get current item 
       currentItem = (offset/$single.width()); 

       // set current color 
       $('.indicator li').not('.indicators li:eq(' + currentItem + ')').css('color', 'black'); 
       $('.indicator li:eq(' + currentItem + ')').css('color', 'red'); 

       return false; 
      }); 

      // set default image on mouseout 
      $viewport.bind('mouseleave.previewBrowser', function(evt) { 
       $(this).animate({ scrollLeft: 0 }, 1); 

       // set current color 
       $('.indicator li').not('.indicator li:eq(0)').css('color', 'black'); 
       $('.indicator li:eq(0)').css('color', 'red'); 
      }); 
     }); 
    }; 
})(jQuery); 

這裏是標記：

<div id="content"> 
    <div class="entry"> 
     <div class="preview"> 
      <ul class="container"> 
       <li><img height="350" src="images/digitalsamba_1.png" width="800" /></li> 

       <li><img height="350" src="images/digitalsamba_2.png" width="800" /></li> 
      </ul> 
     </div><!-- end preview --> 

     <div class="description"> 
      <div class="caption"> 
       <h2>CloudApp</h2> 

       <p> 
        <strong>Product:</strong> CloudApp/<strong>Type:</strong> Development, Icon, Interface 
       </p> 
      </div><!-- end caption --> 

      <div> 
       <ul class="indicator"></ul> 
      </div><!-- end indicator --> 
     </div><!-- end description --> 
    </div><!-- end entry --> 

    <div class="entry no_border"> 
     <div class="preview"> 
      <ul class="container"> 
       <li><img height="350" src="images/digitalsamba_1.png" width="800" /></li> 

       <li><img height="350" src="images/digitalsamba_2.png" width="800" /></li> 
      </ul> 
     </div><!-- end preview --> 

     <div class="description"> 
      <div class="caption"> 
       <h2>Canon Lense</h2> 

       <p> 
        <strong>Product:</strong> Canon/<strong>Type:</strong> Icon 
       </p> 
      </div><!-- end caption --> 

      <div class="indicator"></div><!-- end indicator --> 
     </div><!-- end description --> 
    </div><!-- end entry --> 
</div><!-- end content --> 

我知道我錯了目標的項目，但我只是無法弄清楚如何做是正確的。

Answer 1

我想你應該看看描述OO jQuery插件的this tutorial。插件的問題在於它只是在一個「set」上運行，而不是爲每個集合創建一個新對象。

Answer 2

嘗試

$(document).ready(function() { 
    // launch preview browser 
    $(".entry .preview").each(function(){ 
     $(this).previewBrowser(); 
    }); 
}); 

這將通過所有div.preview迭代中div.container和應用previewBrowser單獨