[英]Problem targetting only specified element
我一直在研究一個小的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 -->
我知道我的目標錯誤,但我只是想不出正確的方法。
我認為您應該看一下描述OO jQuery插件的教程 。 您的插件的問題在於,它僅在一個“集合”上運行,而沒有為每個集合創建一個新對象。
嘗試
$(document).ready(function() {
// launch preview browser
$(".entry .preview").each(function(){
$(this).previewBrowser();
});
});
這將遍歷div.preview
中的所有div.container
並單獨應用previewBrowser
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.