如何使用iScroll处理多个DOM元素(使用jQTouch时)

我把我的标记作为

<div id="home" class="current">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller">
            <ul id="thelist" class="plastic"><!-- li items --></ul>
        </div>
    </div>
    <div class="footer">Footer</div>
</div>   
    <!-- Events Details -->
<div id="events">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller"> <!-- stuffsss --></div>
    </div>
    <div class="footer">Footer</div>
</div>

要让iScroll(http://cubiq.org/iscroll)工作,我需要#scroller作为ID(根据我用来初始化iScroll的javascript代码).

//for iScroll
var myScroll = new iScroll('scroller',{desktopCompatibility:true});

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded',loaded,false);

但是因为我不能有两个具有相同ID的不同元素(请注意我的标记中有两个具有相同id滚动条的元素),所以存在一些冲突并且iScroll无法正常工作.

我希望能够通过将id更改为类来实现标记上的iScroll.我试图将它们改成类,看看它是否有效,但我无法做到正确.

任何人都可以帮我改变代码,以便通过实现类而不是id来实现它吗？

解决方法

Rob是对的,但你可以像你说的那样将代码改为滚动类.
然后在独特的包装器中初始化您的滚动器,如下所示：

var scroll1,scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}