0

例はヘッダーにあります

しばらくの間、このポートフォリオのヘッダーのようなものをやろうとしてきました。矢印をクリックすると、同じ行に異なるコメントを表示できます。また、きれいなものは何もリフレッシュしません。質問をどのように表現するかわかりません。私はついにこの例を見つけました。JS または jQuery コードを手伝ってくれる人はいますか? さまざまな言い回しを試みる前にこれが回答されていた場合は申し訳ありませんが、回答が見つからないようです。

4

1 に答える 1

1

お手軽モード!これはjsfiddleで動作するデモです

いくつかのhtmlをセットアップします

<p>
    I'm a <span id="remark">Panda</span> bear.
    <button id="nextRemark">refresh</button>
    <img src="http://i.imgur.com/cFadsAE.gif" id="spinner"/>
<p>

JavaScript を書く (jQuery を使用)

$(function(){
    var remarks = ["Koala", "Kangaroo", "Circus", "Grizzly"],
        spinner = $("#spinner"),
        delay   = 1000;

    $("#nextRemark").click(function(event) {

        var button = $(this);

        // display spinner, hide button
        spinner.show();
        button.hide();

        setTimeout(function() {
            var r;

            // display remark
            if (r = remarks.pop()) {
                $("#remark").text(r);
            }

            // no more remarks
            else {
                $("#remark").text("dead");
                button.remove();
            }

            // hide spinner, show button
            spinner.hide();
            button.show();

        }, delay);

        event.preventDefault();
    });
});

派手なアニメーションや余分な遅延はありませんが、それが要点です。

于 2013-08-24T22:09:54.507 に答える