0

非常に簡単な質問ですが、それでも一週間ずっと私を悩ませてきました！

まず、誰かが私にこの巨大なコードを書いてくれるとは思っていません。それから私はそれを取り上げて、自分で主張します。誰かが私がこれを書くのを実際に手伝ってくれることを望みます:)

ウェブサイトにプレイリストをpng画像として表示しようとしています。表示する必要のあるプレイリストが2つあります。プレイリストは画像を押すと変わります。

「CD1up」、「CD1down」、「CD2up」、「CD2down」の4つのボタン画像があります。

これらのボタンで、現在表示されているプレイリストを変更するだけでなく、ボタンの正しい状態も表示したいと思います。たとえば、playlist1が表示されている場合、「CD1up」を表示し、「CD2down」を表示する必要があります。

現在のコードをここに投稿しますが、Web javascriptがひどいので、基本的にすべてを廃棄し、最初から始めることにしました。

すべての助けは大歓迎です！

私は基本的にHTMLとCSSに堪能ですが、WebJavaScriptではひどいです。

4

1 に答える 1

4

いくつかのメモ：

  • 各画像にid属性を指定するdocument.getElementByIdと、ページが読み込まれたときにその要素への参照を取得するために使用できます。

  • 次にsrc、その要素のプロパティを新しいURLに設定して、画像を変更できます。

  • script必要なときに要素が存在するように、タグがHTMLの要素の後にあることを確認してください（終了が機能する直前</body>）。

  • clickページ上の任意の要素にイベントハンドラーを追加できます。ほとんどのブラウザはサポートしていますが、一部の古いバージョンのIEでは、ハンドラーを接続するaddEventListenerために使用する必要があります。attachEventしたがって、次のような関数を持つ人々が表示されます。

    function hookEvent(element, eventName, handler) {
    if (element.addEventListener) {
        element.addEventListener(eventName, handler, false);
    }
    else if (element.attachEvent) {
        element.attachEvent("on" + eventName, handler);
    }
    else {
        element["on" + eventName] = function(event) {
            return handler.call(this, event || window.event);
        };
    }
}

したがって、たとえば、これがある場合img：

<img id="myImage" src="/path/to/img.png">

これにより、クリックすると4つの画像が循環します。

<!-- This must be AFTER the `img` above in the HTML,
     just before your closing /body tag is good -->
<script>
(function() {
    var myImage = document.getElementById("myImage"),
        images = [
            "/path/to/img1.png",
            "/path/to/img2.png",
            "/path/to/img3.png",
            "/path/to/img4.png"
        ],
        index = -1;

    hookEvent(myImage, "click", imageClick);

    function imageClick() {
        ++index;
        if (index >= images.length) {
            index = 0;
        }
        myImage.src = images[index];
    }
})();
</script>

jQuery、YUI、Closure、またはその他のいくつかの適切なライブラリを使用して、多くのユーティリティ機能を取得し、ブラウザの違いをスムーズにすることができますが、ページで実行したいのは、画像を時々変更してクリックを処理することだけです。 2つ、それはやり過ぎかもしれません。

于 2012-12-14T05:58:38.823 に答える