对多个元素使用JQuery脚本

Use a JQuery script on multiple elements

本文关键字：JQuery 脚本 元素      更新时间：2023-09-26

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

我是JQuery的新手，所以我不知道的方法

http://jsfiddle.net/9GcM3/7/

为了澄清，我希望"容器"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");
}

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

行动中：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));
    });
});

您需要稍微确定一下范围，使其与多个项目一起工作：

$('.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)
});
下面是代码。我添加了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>
相关文章：