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>

Jクエリ:

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

、、など#ticker-nextのID が重複しています。これらは、HTML と jQuery オブジェクト マップの両方で一意である必要があります。#start#stop

于 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 and #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 に答える