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

好的，我们开始...

jQuery 的一大优点是您可以轻松地选择元素，并在运行时连接事件处理程序，从而为您留下更简洁的代码。另一个好处是您还可以在 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）的 on。这很方便，因为您不需要处理或传递元素 ID。

jQuery 允许您堆叠命令：

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

这会选择元素，显示它，然后根据元素自己的“data-title”值设置 HTML。一行代码中的三个步骤。

剩下的就是简单地使用 data-elements 和 show() 和 hide()，这很明显。

于 2012-09-20T15:51:33.477 回答