지정된 요소 만 타겟팅하는 문제

Question

이미지 위에 마우스를 가져갈 때 iPhoto와 같은 미리보기를 만드는 작은 jQuery 플러그인을 작업하고 있습니다. 한 세트의 이미지 만 있으면 모든 것이 효과적입니다. 마크 업에 하나 이상의 .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을 봐야한다고 생각한다. 플러그인의 문제점은 각 세트에 대해 새 오브젝트를 작성하지 않고 하나의 '세트'에서 실행 중일 뿐이라는 것입니다.

Answer 2

이이 div.container의 모든 div.preview을 반복하고 previewBrowser 개별적으로

적용됩니다

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

시도