1

私はウェブサイトを開発しており、コンテンツの一部はライブの「出発ボード」ティッカーになります。

出発ボード

私はC＃の経験が豊富ですが、Javascriptの経験はまったくありません。

私はSOで次のJavascriptを見つけました。これは、私が望むことをほぼ実行します。

<script type="text/javascript">

    $.fn.ticker = function (options) {

        options = $.extend({
            speed: 30
        }, options);

        var alph = 'ABCDEFGHIJKLMNOPQRSTUVXYZ01234567890,.:+=/();!- ';

        return this.each(function () {
            var k = 1,
            elems = $(this).children(),
            arr = alph.split(''),
            len = 0,
            fill = function (a) {
                while (a.length < len) {
                    a.push(' ');
                }
                return a;
            },
            texts = $.map(elems, function (elem) {
                var text = $(elem).text();
                len = Math.max(len, text.length);
                return text.toUpperCase();
            }),
            target = $('<div>'),
            render = function (print) {
                target.data('prev', print.join(''));
                fill(print);
                print = $.map(print, function (p) {
                    return p == ' ' ? '&#160;' : p;
                });
                return target.html('<span>' + print.join('</span><span>') + '</span>');
            },
            attr = {}

            $.each(this.attributes, function (i, item) {
                target.attr(item.name, item.value);
            });

            $(this).replaceWith(render(texts[0].split('')));

            target.click(function (e) {

                var next = fill(texts[k].split('')),
                prev = fill(target.data('prev').split('')),
                print = prev;

                $.each(next, function (i) {
                    if (next[i] == prev[i]) {
                        return;
                    }
                    var index = alph.indexOf(prev[i]),
                    j = 0,
                    tid = window.setInterval(function () {
                        if (next[i] != arr[index]) {
                            index = index == alph.length - 1 ? 0 : index + 1;
                        } else {
                            window.clearInterval(tid);
                        }
                        print[i] = alph[index];
                        render(print);
                    }, options.speed)
                });
                k = k == texts.length - 1 ? 0 : k + 1;
            });
        });
    };


    // Assign functions
    $('#mainfeatureslist').ticker();

    // Click it now
    $('#mainfeatureslist').click();


</script>

... JQueryと適切なHTMLの必要なインクルードと組み合わせる：

<div id="mainfeatureslistcontainer">
<ul id="mainfeatureslist">
<li>Live bus arrivals</li>
<li>Another feature here</li>
<li>Name of third feature</li>
</ul>
</div>

このコードは、クリックすると次のリスト項目に遷移するリストを生成します。

ただし、クリックを必要とせずに、リストを設定された間隔で自動的に遷移させたいです。

私は簡単なファッジを試しました、すなわち

setInterval($('#mainfeatureslist').click(), 6000);

...しかし、これは何らかの理由でそれを混乱させるようです。プロセスを中断し、アイテムに「ジャンプ」すると、それ以上何も起こりません。

コードが何をするかについて合理的な考えを持っているにもかかわらず、私はコードをリファクタリングして自分が望むことを行う方法がまったくわかりません！独自の.clickメソッドを生成するのは難しいようです。実際、これは非常に優れたコンパクトなコードです。

これをリファクタリングして、5秒ごとにリストを「反転」させるにはどうすればよいですか？

4

1 に答える 1

4

setInterval関数が必要です-現在、関数呼び出し（この場合はjQueryオブジェクト）の戻り値を渡しています。代わりに、実行するコードを含む無名関数を使用してください。

setInterval(function() {
    $('#mainfeatureslist').click();
}, 6000);
于 2012-06-22T21:32:38.893 に答える