仅针对指定元素的问题

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单独