Question

我目前在显示一系列<ul>标记时遇到问题，但一次只显示一个标记，并为每个<li>子标记添加删除按钮，以便删除并显示其他用户。

这是我的代码：

<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['profile_pic'];
?>
<li class="myLi" id="list<?php echo $user_id; ?>">
<img src="http://www.hootpile.com/userdata/profile_pic/<?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 type="text/javascript">
$('#facebook').on("click", '.delete', function() {
 var element = $(this);
 var I = element.attr("id");
 $('li#list'+I).fadeOut('slow', function() {$(this).remove();});
});
</script>

但它似乎没有删除li标签并显示另一个标签。我也在头标记中添加了这个<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript">脚本，但是看起来似乎没有用。

Answer 1

<script type="text/javascript">
$('#facebook').on("click", '.del', function() {
 var element = $(this);
 var I = element.attr("id");
 $('li#list'+I).fadeOut('slow', function() {$(this).remove();});
});
</script>

您正在使用类 .delete 的组件委派click事件，但您没有该类的任何组件。

您应该使用 .del ！

Answer 2

您的代码工作正常，您需要将其包含在就绪函数中。

    jQuery(document).ready(function (){
       jQuery('#facebook').on("click", '.delete', function() {
            var element = jQuery(this);
            var I = element.attr("id");
            jQuery('li#list'+I).fadeOut('slow', function() { jQuery(this).remove();});
        }); 
    });

无法使用javascript删除并显示另一个ul标签？

2 个答案: