Jquery：控制多个新闻自动收报机答案

【问题标题】：Jquery: control multiple news tickerJquery：控制多个新闻自动收报机
【发布时间】：2013-01-23 07:58:35
【问题描述】：

我正在使用 jQuery 新闻代码 plugin。它工作得很好，但是当我在我的页面中放置多个新闻代码时，新闻代码 control(start,stop,next/pre) 不起作用。当我单击控件 1 时，此控件适用于所有新闻自动收报机框，但需要为每个框工作 control。 i.e: control1 for box1, control2 for box2。如何解决这个问题？ ONLINE DEMO（在行动中请先点击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,
            });
        });

【问题讨论】：

标签： jquery news-ticker

【解决方案1】：

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

【讨论】：

【解决方案2】：

更改开始按钮的id，每个newsticker的开始按钮应该有不同的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,
            });
        });

【讨论】：

【解决方案3】：

您也应该更改 #vertical-ticker1 和 ticker-previous1 和 #ticker-next1 和 #start 和 #stop。

jsfiddle Live Demo

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>

【讨论】：