Question

我目前正在解决问题并在javascript中显示另一个用户，我可以从数据库中获取数据，但是淡入效果不起作用。

下面我按照发生的顺序添加了代码：

<?php
  $conn = mysqli_connect("localhost","username","password","subscribers");
?>
<!DOCTYPE html>
<head>
  <style>
  *{margin:0;padding:0;}
  #facebook{
    height:60px;
    width:250px;
    overflow:hidden;
    padding:6px 10px 14px 10px;;
  }
  #facebook li{
    border:0; margin:0; padding:0; list-style:none;
  }
  #facebook li{
    height:60px;
    padding:5px;
    list-style:none;
  }
  #facebook a{
    color:#000000;
    text-decoration:none;
  }
  #facebook .user-title{
    display:block;
    font-weight:bold;
    margin-bottom:4px;
    font-size:11px;
    color:#36538D;
  }
  #facebook .addas{
    display:block;
    font-size:11px;
    color:#666666;
  }
  #facebook img{
    float:left;
    margin-right:14px;
    padding:4px;
  }
  #facebook .del
  {
    float:right; font-weight:bold; color:#666666
  }
  #facebook .del a
  {
    color:#000000;
  }
  #facebook .del a:hover
  {
    background-color:#36538D;
    padding-left:1px;
    padding-right:1px;
    color:#ffffff;
  }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>
<body>
  <ul id="facebook">
  <?php
    $sql=mysqli_query($conn,"SELECT * FROM users2 LIMIT 10");
    while($row=mysqli_fetch_array($sql))
    {
      $user_id=$row['id'];
      $user_name=$row['name'];
      $user_image=$row['image'];
  ?>
    <li id="list<?php echo $user_id; ?>">
      <img src="<?php echo $user_image; ?> " />
      <span class="del"><a href="#" class="delete" id="<?php echo user_id; ?>">X</a></span>
      <a href="" class="user-title"><?php echo $user_name;?> </a>
      <span class="addas">Add as Friend</span>
    </li>
  <?php
  }
  ?>
  </ul> 
  </script>
  <script type="text/javascript" >
  $(function()
    {
      $(".delete").click(function(){
      var element = $(this);
      var I = element.attr("id");
      $('li#list'+I).fadeOut('slow', function() {$(this).remove();});
      return false;
    });
  });
</script>
</body>
</html>

Answer 1

向LI元素添加一个类，然后使用最接近的代码：

<li class="myLi" id="list<?php echo $user_id; ?>">
<img src="<?php echo $user_image; ?> " />
<span class="del"><a href="#" class="delete" id="<?php echo user_id; ?>">X</a></span>
<a href="" class="user-title"><?php echo $user_name;?> </a>
<span class="addas">Add as Friend</span>
</li>

和

<script type="text/javascript" >
$(function()
{
$(".delete").click(function(){

$(this).closest('.myLi').fadeOut('slow', function() {$(this).remove();});
return false;
});
});
</script>

如何使用javascript单击按钮淡出列表？

1 个答案: