在多個元素上使用JQuery腳本

Question

當用戶將鼠標懸停在按鈕上時，我寫了一個腳本來製作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"); 
} 

Answer 1

您需要範圍這一點，使其與多個項目的工作：

$('.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 2

這裏是代碼。我已經添加了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> 

Answer 3

試試這個，可以在類似的情況中使用（如圖案）：

在動作：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)); 
    }); 
});