Javascript 仅针对指定的元素时出现问题

我一直在开发一个小型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);

$（文档）.ready（函数（）{
//启动预览浏览器
$（'.preview'）.previewBrowser（）；
});
（函数（$）{
$.fn.previewBrowser=函数（）{
返回此值。每个（函数（）{
//获得dom
var$viewport=$（this.css（'overflow'，'hidden'），
$container=$viewport.children（'ul'），
$items=$container.children（'li'），
$single=$items.filter（':first'）；
//将视口设置为正确的大小
$viewport.css（{height:$single.height（），width:$single.width（）}）；
//将容器设置为正确的宽度
$container.css（{height:$single.height（），width:$items.length*$single.width（）}）；
//浮动项目
$items.css（{float:'left'}）；
//向dom添加指示器
var指标=“”；
对于（i=0；i<$items.length；i++）{
指示器+='
O
；
}
$（指示符）.appendTo（'.indicator'）；
//设置默认指示器
$（'指示符li:eq（0）'）.css（'颜色'，'红色'）；
//鼠标悬停时设置滚动位置
$viewport.bind（'mousemove.previewBrowser'，函数（evt）{
x=evt.pageX-this.offsetLeft；
offset=Math.floor（x/（$single.width（）/$items.length））*$single.width（）；
$（this.animate（{scrollLeft:offset}，1）；
//获取当前项目
currentItem=（偏移量/$single.width（））；
//设置当前颜色
$（'.indicator li'）.not（'.indicators li:eq（'+currentItem+'））.css（'color'，'black'）；
$（'.indicator li:eq（'+currentItem+'））.css（'color'，'red'）；
返回false；
});
//设置鼠标输出上的默认图像
$viewport.bind（'mouseleave.previewBrowser'，函数（evt）{
$（this.animate（{scrollLeft:0}，1）；
//设置当前颜色
$（'.indicator li'）。非（'.indicator li:eq（0'））。css（'color'，'black'）；
$（'指示符li:eq（0）'）.css（'颜色'，'红色'）；
});
});
};
})（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 -->

CloudApp

产品：CloudApp/类型：开发、图标、界面






佳能透镜

产品：佳能/类型：图标

---

我知道我的目标是错误的，但我就是不知道如何正确地实现它。

我认为您应该看看如何描述OO jQuery插件。你的插件的问题在于它只在一个“集合”上运行，而不是为每个集合创建一个新对象。

试试看

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

这将遍历

div.container

中的所有

div.preview

，并分别应用

previewBrowser