Question

我正在使用 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>

JQUERY：

$(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,
            });
        });

Answer 1

您有重复的ID，例如#ticker-next，#start，#stop等。这些都需要在HTML和jQuery对象图中都是唯一的。

Answer 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,
            });
        });

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

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

3 个答案: