1

我正在使用jQuery新闻自动收录器插件。它工作得很好，但是当我在我的页面中放置多个新闻代码时，新闻代码control(start,stop,next/pre)不起作用。当我单击控件 1 时，此控件适用于所有新闻自动收报机框，但需要control为每个框工作。i.e: control1 for box1, control2 for box2. 如何解决这个问题？在线演示（实际操作中请先点进去controlbar。）

HTML：

<ul id="vertical-ticker">
            <li>One Time</li>
            <li>Baby</li>
            <li>One Less Lonely Girl</li>
            <li>Somebody to Love</li>
            <li>Eenie Meenie</li>
            <li>Never Say Never</li>
            <li>U Smile</li>
</ul>
<p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>
<ul id="vertical-ticker1">
            <li>One Time</li>
            <li>Baby</li>
            <li>One Less Lonely Girl</li>
            <li>Somebody to Love</li>
            <li>Eenie Meenie</li>
            <li>Never Say Never</li>
            <li>U Smile</li>
</ul>
    <p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>

查询：

$(function(){
            $('#vertical-ticker').totemticker({
                row_height  :   '100px',
                next        :   '#ticker-next',
                previous    :   '#ticker-previous',
                stop        :   '#stop',
                start       :   '#start',
                mousestop   :   true,
            });
        });
$(function(){
            $('#vertical-ticker1').totemticker({
                row_height  :   '100px',
                next        :   '#ticker-next',
                previous    :   '#ticker-previous',
                stop        :   '#stop',
                start       :   '#start',
                mousestop   :   true,
            });
        });
4

3 回答 3

3

您有重复的 id，如#ticker-next, #start,#stop等。这些在 HTML 和 jQuery 对象映射中都必须是唯一的。

于 2013-01-23T08:00:34.347 回答
2

更改开始按钮的 id，每个新贴纸的开始按钮应该有不同的 id。

$(function(){
            $('#vertical-ticker').totemticker({
                row_height  :   '100px',
                next        :   '#ticker-next',
                previous    :   '#ticker-previous',
                stop        :   '#stop',
                start       :   '#start',
                mousestop   :   true,
            });
        });
$(function(){
            $('#vertical-ticker1').totemticker({
                row_height  :   '100px',
                next        :   '#ticker-next2',
                previous    :   '#ticker-previous2',
                stop        :   '#stop2',
                start       :   '#start2',
                mousestop   :   true,
            });
        });
于 2013-01-23T08:00:38.223 回答
1

你应该改变#vertical-ticker1and ticker-previous1and #ticker-next1and #startand #stoptoo。

jsfiddle 现场演示

JavaScript

$(function(){
        $('#vertical-ticker1').totemticker({
            row_height  :   '100px',
            next        :   '#ticker-next1',
            previous    :   '#ticker-previous1',
            stop        :   '#stop1',
            start       :   '#start1',
            mousestop   :   true,
        });
    });

HTML

<p><a href="#" id="ticker-previous1">Previous</a> / <a href="#" id="ticker-next1">Next</a> / <a id="stop1" href="#">Stop</a> / <a id="start1" href="#">Start</a></p>
于 2013-01-23T08:06:51.447 回答