Question

我在图像上滑动了一下。在下面的小提琴中它只是一个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();
});

在动态创建的图像上滑动面板

1 个答案: