Jquery 具有多个li'；s

我使用hoverIntent触发onMouseOver和onMouseOut事件

它适用于我的一个li，实际上它看起来只附加到一个li，当我悬停在其他列表项上时，它会在最后一个列表项上显示show（）和hide（）函数

这是我的密码：

            <script>
                $(document).ready(function(){
                        var config = {
                            over: show, // function = onMouseOver callback (REQUIRED)    
                            timeout: 200, // number = milliseconds delay before onMouseOut    
                            out: hide // function = onMouseOut callback (REQUIRED)    
                        };
                    $("#ULid li").hoverIntent( config )
                    $('a.names').click(function() {
                        var id = this.id.replace('id', '');
                        $.get("dependencies/ajax/contacts.ajax.php",{
                            cmd    : "view",
                            id   : id,
                        }, function(data) {
                            $("#detailsPane").fadeIn(500).html(data);
                        });
                    });
                    $('a.delete').click(function() {
                        var id = this.id.replace('id', '');
                        $.get("dependencies/ajax/contacts.ajax.php",{
                            cmd    : "view",
                            id   : id,
                        }, function(data) {
                            $("#contact-" + id).slideUp("slow").html(data);
                        });
                    });
                });
                function show(){
                    var selector = $(this).find('.delete-div');
                    selector.fadeIn('slow');
                }
                function hide(){
                    var selector = $(this).find('.delete-div');
                    selector.fadeOut(500);
                }
            </script>
            <div class="toolbar">
                <a href="javascript:void(0);" onclick='$("#addC").toggle();'><p id="addC20" style="float: left"></p></a>
                <p style="float: right; position: relative; top: 0px; left: -10px;">Contact Manager</p>
            </div><!-- end toolbar -->

            <div id="contact-wrap">
                <div id="groups">
                    <div id="contact-search" class="search">
                        <input type="text" class="input" name="search" />
                        <img src="dependencies/images/header/search.png" />
                    </div><!-- end search -->

                    <h3 id="groups-heading">Groups</h3>
                    <ul class="post">
                    <? while($row = mysql_fetch_array($groups)) {
                        echo '<li><a href="#" class="groups" id="' . $row['id'] . '">' . $row['first_name'] . ', ' . $row['last_name'] . '</a></li>';
                    } ?>
                        <li>Business</li>
                        <li>Personal</li>
                        <li><a href="#">Add group</a></li>
                    </ul><!-- end post -->
                </div><!-- end names -->

                <div id="names">
                    <h3 id="names-heading">Contacts</h3>
                    <ul class="post" id="ULid">
                    <? while($row = mysql_fetch_array($contacts)) { ?>
                        <li id="contact-<?=$row['id'];?>">
                            <p class="contact-image" style="float: left;"></p>
                            <span><a href="javascript:void(0);" class="names" id="<?=$row['id'];?>"><?=$row['first_name'];?>, <?=$row['last_name'];?></a></span>
                            <div class="delete-div" style="float: right; display: none;">
                                <a href="javascript:void(0);" class="delete" id="<?=$row['id'];?>">
                                    <p class="delete-image" style="float: left;"></p>
                                </a>
                            </div>
                        </li>
                    <? } ?>
                    </ul><!-- end post -->
                </div><!-- end names -->

                <div id="detailsPane"></div>

$（文档）.ready（函数（）{
变量配置={
over:show，//function=onMouseOver回调（必需）
超时：200，//number=onMouseOut之前的毫秒延迟
out:hide//function=onMouseOut回调（必需）
};
$（“#ULid li”）.hoverIntent（配置）
$（'a.names'）。单击（函数（）{
var id=this.id.replace（'id'，''）；
$.get（“dependencies/ajax/contacts.ajax.php”{
命令：“查看”，
id:id，
}，函数（数据）{
$（“#detailsPane”）.fadeIn（500）.html（数据）；
});
});
$（'a.delete'）。单击（函数（）{
var id=this.id.replace（'id'，''）；
$.get（“dependencies/ajax/contacts.ajax.php”{
命令：“查看”，
id:id，
}，函数（数据）{
$（“#联系人-”+id）.slideUp（“slow”）.html（数据）；
});
});
});
函数show（）{
变量选择器=$（this.find（'.delete div'）；
选择器.fadeIn（'slow'）；
}
函数hide（）{
变量选择器=$（this.find（'.delete div'）；
选择器。衰减（500）；
}
联系人管理器

组

生意
私人的


联络

嗯。。。。你真的需要一些帮助

首先，让我们在循环之外做这件事

<script>
$(document).ready(function(){
    var config = {  over: show,    
    timeout: 200,    
    out: hide    
    };
    $('#ULid li').hoverIntent( config );    

    $('a.names').click(function(){
        var id = this.id.replace('id','');
        $.get("dependencies/ajax/contacts.ajax.php",{
            cmd    : "view",
            id   : id,
    }, function(data) {                                      
               $("#detailsPane").fadeIn().html(data);
        });
    });

    $('a.delete').click(function() {

       var id = this.id.replace('id', '');
       var $this = $(this);

       $.get("dependencies/ajax/contacts.ajax.php",{
          cmd    : "delete",
          id   : id,
       }, function(data) {
          $this.closest('li').slideUp("slow").html(data);
       });
    });


});

function show(){ 
    var selector = $(this).find('.delete');
    selector.fadeIn('slow');
}
function hide(){ 
    var selector = $(this).find('.delete');
    selector.fadeOut('slow');
}
</script>


$（文档）.ready（函数（）{
var config={over:show，
超时：200，
外出：隐藏
};
$（'ULid li'）.hoverIntent（配置）；
$（'a.names'）。单击（函数（）{
var id=this.id.replace（'id'，''）；
$.get（“dependencies/ajax/contacts.ajax.php”{
命令：“查看”，
id:id，
}，函数（数据）{
$（“#detailsPane”）.fadeIn（）.html（数据）；
});
});
$（'a.delete'）。单击（函数（）{
var id=this.id.replace（'id'，''）；
var$this=$（this）；
$.get（“dependencies/ajax/contacts.ajax.php”{
命令：“删除”，
id:id，
}，函数（数据）{
$this.closest（'li'）.slideUp（“slow”）.html（数据）；
});
});
});
函数show（）{
变量选择器=$（this.find（'.delete'）；
选择器.fadeIn（'slow'）；
}
函数hide（）{
变量选择器=$（this.find（'.delete'）；
选择器。淡出（“慢”）；
}

然后是你的php

<ul id="ULid">
<? while($row = mysql_fetch_array($contacts)) { ?>

    <li id="contact-<?=$row['id'];?>">
        <p class="contact-image" style="float: left;"></p>
        <span><a href="#" class="names" id="id<?=$row['id'];?>"><?=$row['first_name'];?>, <?=$row['last_name'];?></a></span>
        <div class="delete" style="float: right; display: none;">
            <a href="javascript:void(0);" class="view"onclick='
                $.get("dependencies/ajax/contacts.ajax.php",{
                    cmd: "delete",
                    id: "<?=$row['id'];?>"
                }, function(data){
                $("contact-<?=$row['id'];?>").fadeOut(2000).html(data);
                });
            '>
            <p class="delete-image" style="float: left;"></p>
            </a>
        </div>
    </li>
<? } ?>
</ul>


哈哈，是的，我的脚本在循环之外，不能让它与多个li一起工作，所以我想我会看看是否在循环内工作，然后通过id属性将它附加到每个li。给我一分钟看看你的编辑是否有用哈哈，我可以问一下你的编辑是否正确吗？似乎不适合我哦，我的开发网站是离线的，但只是一个供我测试文件的url。我正在做的项目是helixagent.com，我正在那里试用这段代码。此外，我似乎无法让您的脚本版本在鼠标悬停事件上显示div。hmmmok，在
show
功能中，尝试
alert（selector）
，看看我们是否找到了正确的选择器。而且我似乎也不知道
.delete-
指向哪里。那么，它是不是
？但是这个是
。删除图像
。要删除它，不要附加它。使用
.html（）
而不是
.append（）
；）