Question

我是jQuery的新手所以请耐心等待。我想创建一个文本标题，当您将鼠标悬停在页面上的链接上时，该标题会在图像上向下滑动。当只有一个带有一个标题的图像但我在一个页面上有几个带有不同标题的图像时，我可以这样做。

我想创建一个函数，它可以在单独的实例中处理所有这些，而不是为每个图像/文本标题创建一个函数。原因是图像和文本是动态的，并且随着时间的推移而变化。

请参阅下面的代码示例，.portText是一个大约7个实例的类，当我将鼠标悬停在.moreInfo上时，每个图像的文本向下滑动。我理解为什么会发生这种情况，我认为我需要以某种方式使用（$ this），但我也认为我需要将图片连接到文本，而不是在这里完成。希望这是有道理的。有人可以帮忙吗？干杯！

$(function() {

    $('.moreInfo').hover(

        function() {
        $('.portText').slideDown('slow');   
        },

        function() {
        $('.portText').slideUp('slow'); 
     }
     )
 });

Answer 1

您可以使用$(this)来引用悬停在其上的元素。

我通常这样做的方法是让portText成为moreInfo div的孩子：

<div class="moreInfo">
    <div class="portText">
        ....
    </div>
</div>

然后您可以$('.portText')代替$('.portText', this)而不是<div class="moreInfo" data-id="1">....</div> <div class="portText" id="portText-1">...</div>（即所有作为悬停元素子代的portTexts）。

编辑：另一种方法是使用data属性并为每个portText提供一个ID：

$('.moreInfo').hover(    
    function() {
        var myId= "#portText-" + $(this).data('id');
        $(myId).slideDown('slow');
    },

    function() {
        var myId= "#portText-" + $(this).data('id');
        $(myId).slideUp('slow');
    }
);

然后是Javascript：

{{1}}

使用jQuery在多个图像上的文字标题

1 个答案: