悬停并显示管理按钮

Question

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

正如您在this image 中看到的，这是一个普通的 eshop 列表。我想这样做，如果您是管理员，当您悬停一个项目时，您可以看到管理按钮，例如在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 语句，您希望管理面板出现在其中：

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 函数。语法是这样的： $("object").slideToggle(duration);

在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);
            });

感谢大家的支持！