Question

在我看来，我有一个很大的问题。或者只是了解悬停功能的问题。我尝试了很多方法，阅读了很多教程，但没有得到的东西，我需要什么。这可能是愚蠢的，但我正在制作具有低知识技能的jQuery的前端管理面板。

正如您在this image中所看到的，这是一个简单的电子商店列表。我想这样做，如果你是管理员，当你悬停一个项目时，你可以看到管理按钮，如this image，但只能在悬停的项目上。请帮我解决这个问题。

无论如何，这是我对该部分页面的代码：

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
  $(".admin_item").hide();
  $('.item').hover(function() {
    $(".admin_item").slideToggle(".admin_item");
  });
});
</script>

<!-- $admin_item -->
<?
  $admin_item = '<div class="admin_item" style="position: absolute; padding-left: 380px;"><a href="?edit"><img src="style/icon/pencil.png" alt="" /></a><a href="?delete"><img src="style/icon/delete.png" alt="" /></a></div><div class="clear"></div>';
?>

<!-- list -->
<div class="page_content" id="goods">
  <?
    $items = array (
      1 => array("Lorem ipsum dolor sit amet, consectetur adipiscing elit.","3.65","List 3-1"),
      2 => array("Proin ut est ut purus venenatis suscipit tristique id mi.","4.00","List 3-2"),
      3 => array("Integer posuere mauris dapibus massa malesuada id malesuada velit congue.","5.49","List 3-3"),
      4 => array("Vivamus eu purus quam, ut convallis urna.","7.40","List 3-2"),
      5 => array("Suspendisse eu felis erat, ut mollis erat.","8.20","List 3-1"),
      6 => array("Morbi malesuada facilisis neque, at dapibus nibh elementum quis.","9.85","List 3-1"),
      7 => array("Proin euismod mauris ac lorem sodales faucibus.","10.00","List 3-2"),
      8 => array("Maecenas vitae neque ac nibh venenatis laoreet nec sed nisi.","12.90","List 3-3"),
    );
    $i=1;
    foreach($items as $item) :
  ?>
  <?=$admin_item?>
  <div class="item">
    <div class="details floatleft">
      <div class="image floatleft"><img src="images/items/example/thumbs/<?=$i?>_s.jpg" alt=""></div>
      <div class="description floatleft"><?=$item[0]?></div>
      <div class="price floatleft">LVL <?=$item[1]?></div>
      <div class="category floatleft"><?=$item[2]?></div>
    </div>
    <div class="cart floatleft"><img src="style/shopping_cart.png" alt="" /></div>
  </div>
  <div class="clear"></div>
  <? $i++; endforeach;?>
</div>

Answer 1

可能是因为你正在做这样的幻灯片切换：

$(".admin_item").slideToggle(".admin_item");

应该是：$(".admin_item").slideToggle([ duration ], [ easing ], [ callback ]);

请改为：$(".admin_item").slideToggle('fast');

Answer 2

好吧，我假设您正在使用会话变量来保存您的用户信息。您可能应该编辑您的帖子以包含该信息，因为它非常相关。

因此，当用户登录时，设置会话变量$_SESSION['permit'] = "admin";，或者有时更容易使用数字权限级别：$_SESSION['permit'] = 100;。

现在，当您加载此PHP时，抓取该会话变量并将其置于本地：$permit = $_SESSION['permit'];并在您的循环上创建销售项目，并在此处显示if语句，您希望管理面板显示：< / p>

if($permit > 10) {
echo "<div class='admin_item' style='position: absolute; padding-left: 380px;'><a href='?edit'><img src='style/icon/pencil.png' alt='' /></a><a href='?delete'><img src='style/icon/delete.png' alt='' /></a></div><div class='clear'></div>";
}

现在你的jquery把这个：

$("div.item").hover(function() {
     $("div.admin_item").slideToggle(500);
});

希望这有帮助！

编辑：抱歉，您在撰写我的回复时编辑了您的帖子。你的实际jquery错误是你写的slideToggle函数错误。语法是这样的： $（ “对象”）的slideToggle（持续时间）;

查看http://api.jquery.com/slideToggle/

上的文档

Answer 3

我做到了！：）

这很容易：

            $("div.admin_item").hide();
              $("div.item").hover(function() {
                $(this).find("div.admin_item").fadeIn(500);
              },function(){
                $(this).find("div.admin_item").fadeOut(500);
            });

谢谢大家的支持！

悬停并显示管理按钮

3 个答案: