我一直在尋找一段時間,而我只是用JQuery和JavaScript來弄清楚我的錯在哪裏。任何幫助將不勝感激。我有下面的腳本,這對一個元素很有用。我如何修改這個以處理多個元素?如果頁面上有多個元素,滑塊將滾動一切,而不僅僅是一個容器內的元素。我知道我可以在技術上爲每種方法創建新的變量和新的類名,但這很混亂,我知道必須有一個更聰明的方法。將jQuery隔離爲只包含元素
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth();
$('.slider', container).slider({
min: 0,
max: itemsWidth,
handle: '.handle',
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
這裏是html。
<div class="sliderGallery">
<ul id="audio-downloads">
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
</ul>
<div class="slider">
<div class="handle"></div>
</div>
</div>
<div class="sliderGallery">
<ul id="audio-downloads">
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
<li><a href="#">Audio Title</a></li>
</ul>
<div class="slider">
<div class="handle"></div>
</div>
</div>
你仍然使用'容器',它不再被定義。 – jitter 2009-12-05 00:58:48
@jitter,很好的捕獲。錯過了那一個! – 2009-12-05 01:02:54
這幾乎修好了!這實際上是有道理的。現在唯一的問題是它是一個滑塊,現在當您拖動它時滑塊不會跟隨鼠標。那有意義嗎?我可以讓它們互相獨立滾動,但滑塊不會隨鼠標移動。我正在使用jQuery和jQuery UI的最新版本 – jaasum 2009-12-05 01:15:05