如何使用iScroll处理多个DOM元素(使用jQTouch时) [英] How to handle Multiple DOM elements with iScroll (while using 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无法正常工作./p>

我希望能够通过将id更改为类来在标记上实现iScroll.我试图将它们更改为类，看看是否可行，但是我做对了.

谁能帮助我更改代码，以便通过实现类而不是id来实现??

解决方案

Rob是正确的，但是您可以按照您所说的将代码更改为滚动条类. 然后像这样在独特的包装器中初始化滚动器:

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

I've my markups as

<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>

For iScroll (http://cubiq.org/iscroll) to work, I need the #scroller as ID (as per the javascript Code I'm using to initialize iScroll.

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

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

But since I can't have two different elements with the same ID (please notice I've got two elements with same id scroller in my markup above), some conflicts are there and the iScroll isn't working properly.

I want to be able to implement the iScroll on the markup by changing the id as classes. I tried to change them into classes and see if it works but I couldnt get it right.

Can anyone help me change the codes so that it works by implementing classes instead of the the id??

解决方案

Rob is right, but you can change your code to scroller classes as you said. Then initialise your scrollers within unique wrappers like this:

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

这篇关于如何使用iScroll处理多个DOM元素(使用jQTouch时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！