Question

当用户将鼠标悬停在按钮上时，我编写了一个脚本来进行div滚动，但我想修改此代码以允许多个实例在一个页面上生效。

我是JQuery的新手，所以我无法弄清楚如何做到这一点

为了澄清我想要“容器”div的多个副本，所有这些都以相同的方式工作，使用自己的按钮，使用相同的脚本。

HTML：

<div class="container">
<div class="content">
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
</div>

<a href="#" id="left">left</a>

<a href="#" id="right">right</a>

JQuery的：

$(document).ready(function () {


var products = $('.product').length;
var width = products * 100;
$('.content').css('width', width + 'px');    


if ($('.content').width() > $('.container').width()) {
    $("#left").hover(function () {

        animateContent("left");

    }, function () {
        $('.content').stop();

    });

    $("#right").hover(function () {
        animateContent("right");

    }, function () {
        $('.content').stop();
    });
}
});

function animateContent(direction) {
var animationOffset = $('.container').width() - $('.content').width();
if (direction == 'left') {
    animationOffset = 0;
}

$('.content').animate({
    "marginLeft": animationOffset + "px"
}, "fast");
}

Answer 1

试试这个，可以在类似情况下使用（比如模式）：

行动中：jsfiddle

$.extend({
    worker: new function () {
        var _self = this;
        var _container = null;

        _self.initialize = function (container) {
            _container = container;
            _attachBehavior(container);
        };

        var _attachBehavior = function (container) {

            var products = $('.product', container).length;
            var width = products * 100;
            $('.content', container).css('width', width + 'px');    

            if ($('.content', container).width() > $('.container').width()) {
                $("#left", container).hover(function () {
                    animateContent("left", container);
                }, function () {
                    $('.content', container).stop();
                });

                $("#right", container).hover(function () {
                    animateContent("right", container);

                }, function () {
                    $('.content', container).stop();
                });
            }

            var animateContent = function (direction, container) {
                var animationOffset = $(container).width() - $('.content', container).width();
                if (direction == 'left') {
                    animationOffset = 0;
                }
                $('.content', container).animate({ "marginLeft": animationOffset + "px" }, "fast");
            };

        };
    }
});

$(document).ready(function () {
    $('.container').each(function () {
        $.worker.initialize($(this));
    });
});

Answer 2

您需要对此进行一些调整以使其适用于多个项目：

$('.content').each(function(){
   //this now refers to the specific content div
   var products = $(this).find('.product').length;
   var width = products * 100;
   $(this).css('width', width + 'px');    
   //I think you get the rest from here, just adapt everything to find and $(this)
});

Answer 3

这是代码。我添加了2个实例并更改了一些css。见Fiddle

<强> JS

var Scroll = function( data ){
    var tis     = this;
    this.data = data;

    this.init = function(){
        this.left               = $(this.data.left);
        this.right              = $(this.data.right);
        this.container  = $(this.data.container);
        this.content        = $(this.data.content);

        this.left.hover(function(){tis.animateContent("left")}, function(){tis.content.stop()});
        this.right.hover(function(){tis.animateContent("right")}, function(){tis.content.stop()});  
    }
    this.animateContent = function(direction){

        var containerWidth      = this.container.width();
        var contentWidth            = this.content.width();

        if ( contentWidth > containerWidth ){
            var animationOffset = containerWidth - contentWidth;        
            if (direction == 'left') animationOffset = 0;
            this.content.animate({marginLeft : animationOffset + "px"}, "fast")
        }
    }   
}
var a = new Scroll( { left: '#left', right: '#right', container: '#container', content: '#content' } );
var b = new Scroll( { left: '#left2', right: '#right2', container: '#container2', content: '#content2' } );
$(function(){
    a.init();
    b.init();
});

<强> CSS

.container {
    position: relative;
    height:100px;
    width:400px;
    background:red;
    padding:0 10px;
    overflow: hidden;
}
.content {
        position: absolute;
    background:#eee;
    height:70px;
        white-space:nowrap;
}
.product {
    height:80px;
    width:100px;
    display: inline-block;
}

<强> HTML

<div class="container" id="container">
    <div class="content" id="content">
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
    </div>
</div>
<a href="#" id="left">left</a>
<a href="#" id="right">right</a>

<div class="container" id="container2">
    <div class="content" id="content2">
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
        <div class="product">
            <p>string</p>
        </div>
    </div>
</div>
<a href="#" id="left2">left</a>
<a href="#" id="right2">right</a>

在多个元素上使用JQuery脚本

3 个答案: