Javascript 使用jQuery在多个图像上显示文本标题

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

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

请看下面的代码示例，.portText是一个包含大约7个实例的类，当我将鼠标悬停在.moreInfo上时，每个图像的文本都会向下滑动。我理解为什么会发生这种情况，我想我需要以某种方式使用$this，但我也认为我需要以不同的方式将图片与文本连接起来。希望这是有意义的。有人能帮忙吗？干杯

$(function() {

    $('.moreInfo').hover(

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

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

---

您可以使用$this引用悬停在上面的元素

我通常的做法是将portText设置为moreInfo div的子级：

然后，对于Javascript：

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

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

---

你能发布一些你有的HTML标记吗？帮助您选择应该使用的选择器会容易得多。您好，感谢您的回复。这绝对是一种方法，我可能会考虑用这种方法重新构造我的html。如果能在不改变结构的情况下找到这样做的机会，那就太好了。还有其他想法吗？干杯

<div class="moreInfo" data-id="1">....</div>

<div class="portText" id="portText-1">...</div>

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

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