Question

我构建了以下幻灯片，用于检索...

的内容

<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调用函数，但是无法正常工作。

有什么想法吗？

Answer 1

好的，我们走了......

jQuery的一个美妙之处在于您可以轻松选择元素，并在RUN TIME连接事件处理程序，为您提供更清晰的代码。另一个好处是你还可以在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)为您提供当前元素，在您的情况下是触发指定事件的on（mouseover / mouseout）。这很方便，因为您不需要处理或传递元素ID。

jQuery允许您堆叠命令：

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

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

其余的只是使用数据元素和show（）以及hide（），这很明显。

使用（this）从不相关的标记调用javascript函数

1 个答案: