javascript - 动态创建图像上的滑动面板

Question

我有一个向下滑动的图像。在下面的 fiddle 中，它只是一个 div，但在实际情况下它被替换为图像。请参阅工作示例:

现在，我遇到的问题是，如果我有多个图像，那么就会循环:

<div class='wrap'>
  <div class="clickable_div"></div>
  <div class="nav_menu">
        <ul>
            <li id="l1"><strong>Client Name</strong></li>
            <li>Company Name</li>
            <li>Job Title</li>
        </ul>
   </div>

$(window).load(function(){
$('.clickable_div').mouseover( function(){
$('.nav_menu').slideDown();
})
$('.wrap').mouseleave( function(){
$('.nav_menu').slideUp();
});

 });//]]> 


$('.clickable_div').mouseover( function(){
$('.nav_menu').slideDown();
})
$('.wrap').mouseleave( function(){
$('.nav_menu').slideUp();
});

这就是它所实现的效果，并且它适用于 1 个图像:https://jsfiddle.net/r70nbL8t/1/

我面临的问题是，例如 5 张图像连续。我将鼠标悬停在其中一个上方，然后它们全部滑落。例如，我需要附加一个数字以使其唯一，我使用的 php 代码循环是:

<table cellspacing="5">
<?php
$sessionTrainers = mysqli_query($con,"SELECT *** Criteria Here");
$m = 0; // Start Counter
$n = 4; // Each Nth iteration would be a new table row
while($attendees = mysqli_fetch_array($sessionTrainers))
{

if($m % $n == 0 && $m != 0)
{
// New table row
echo '</tr><tr>';
}
$m++;
?>

    <td style="padding:5px;" align="center">
    <div class='wrap'>
    <div class="clickable_div">
    <img style="border:8px solid #3ED300;" height="150px" src="#" />
    </div>

    <div class="nav_menu">
        <ul>
            <li id="l1"><strong><? echo $attendees['NAME']; ?> <? echo $attendees['LAST_NAME']; ?></strong></li>
            <li><? echo $companyName ?></li>
            <li><? echo $attendeeJobTitle ?></li>
        </ul>
    </div></div><br /></td>
<?
}
?>
</table>

所以这基本上所做的就是将图像添加到 td 中，直到连续 4 个图像，然后开始新行并继续。现在，当将鼠标悬停在一张幻灯片上(只有一张幻灯片)时，如何动态地让脚本处理图像？

我们将不胜感激您的帮助。

Answer 1

JSFIDDLE DEMO

您需要使用$(this)。如果您使用没有上下文的类，则您将定位 DOM 中该类的所有实例，而必须定位与您悬停在其上的元素相关的类。

$('.clickable_div').mouseover( function(){
    $(this).next('.nav_menu').slideDown();
})

$('.clickable_div').mouseleave( function(){
    $(this).next('.nav_menu').slideUp();
});