0

内容を取得する次のスライドショーを作成しました...

<li title=""> and <a title="">

...そしてそれを内部に表示します

<h2> & <h3>

....各スライドショーの画像にカーソルを合わせながら下に移動します。onmouseoverがアクティブでない場合、見出しタグはクリアされ、デフォルトの状態に戻ります。

HTML：

<ul class="slideshow">
    <li id="picture-1" title="Picture Title" onmouseover="pictureTitle(this)" onmouseout="clearPicture()">
        <a title="Picture Description" onmouseover="pictureDescription(this)" href="#">   
            <img src="images/picture-1.png">
        </a>
    </li>
    <li id="picture-2" title="Picture 2 Title" onmouseover="pictureTitle(this)" onmouseout="clearPicture()">
        <a title="Picture 2 Description" onmouseover="pictureDescription(this)" href="#">   
            <img src="images/picture-2.png">
        </a>
    </li>
    <li id="picture-3" title="Picture 3 Title" onmouseover="pictureTitle(this)" onmouseout="clearPicture()">
        <a title="Picture 3 Description" onmouseover="pictureDescription(this)" href="#">   
            <img src="images/picture-3.png">
        </a>
    </li>
</ul>

<h2 id="picture-notitle">Default Picture Title</h2>
<h2 id="picture-title"></h2>
<h3 id="picture-nodescription">Default Picture Description</h3>
<h3 id="picture-description"></h3>

Javascript：

function pictureTitle(li) {
    var name = document.getElementById("picture-title");
    name.innerText = li.title;
    name.style.display = "block";
    document.getElementById("picture-notitle").style.display = "none";
}

function pictureDescription(a) {
    var description = document.getElementById("picture-description");
    description.innerText = a.title
    description.style.display = "block";
    document.getElementById("picture-nodescription").style.display = "none";
}

function clearPicture() {
    document.getElementById("picture-notitle").style.display = "block";
    document.getElementById("picture-title").style.display = "none";
    document.getElementById("picture-nodescription").style.display = "block";
    document.getElementById("picture-description").style.display = "none";
}

CSS：

#picture-title, #picture-description {
    display: none;
}

スライドショーは意図したとおりに機能します。写真にカーソルを合わせると、その「タイトル」と「説明」が表示されます。しかし、私はそれに構築するのに苦労しています。実際の画像自体ではなく、テキストのセットにカーソルを合わせたときにも、pictureTitle（）関数とpictureDescription（）関数を呼び出せるようにしたいと思います。

<h1>
    <span>Picture 1</span>
    <span>Picture 2</span>
    <span>Picture 3</span>
</h1>

spanタグでonmouseoverを使用して関数を呼び出そうとしましたが、何も機能しませんでした。

何か案は？

4

1 に答える 1

1

OK、ここに行きます...

jQueryの利点の1つは、要素を簡単に選択でき、実行時にイベントハンドラーを接続できるため、コードがよりクリーンになります。もう1つの利点は、HTMLにデータ要素を隠しておくこともできるため、よりクリーンでスリムなHTMLになります。

<ul class="slideshow">
   <li>
        <a data-title="Picture Title" data-description="Picture Description" href="#">   
            <img src="images/picture-1.png">
        </a>
    </li>
...

ページの準備ができたら、イベントハンドラーを接続する必要があります。このコードは、DOMの準備ができると、「init」と呼ばれる関数を呼び出します。

$(document).ready(function() {
    init()
});

    function init() {
        $(".slideshow a").on("mouseover",function(event) {     
            $("#picture-title").show().html($(this).data('title'));           
            $("#picture-description").show().html($(this).data('description'));
            $("#picture-notitle").hide()
            $("#picture-nodescription").hide()
        });
        $('.slideshow a').on("mouseout", function(event){
            $("#picture-notitle, #picture-nodescription").show()
            $("#picture-title, #picture-description").hide()
        });
    }

説明：

$(".className")クラス名に一致するすべての要素の配列を提供します。

$("#elementID")IDに一致する要素を提供します

$(this)現在の要素を提供します。この場合、指定されたイベント（mouseover / mouseout）を発生させた要素です。これは、要素IDを処理または渡す必要がないという点で便利です。

jQueryを使用すると、コマンドをスタックできます。

$("#picture-title").show().html($(this).data('title'));

これにより、要素が選択されて表示され、要素自体の「data-title」値に基づいてHTMLが設定されます。1行のコードで3つのステップ。

残りは、データ要素とshow（）およびhide（）を使用するだけです。これらは非常に明白です。

于 2012-09-20T15:51:33.477 に答える