Question

我正在使用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>

如果我将脚本移到while循环之外，那么当我将鼠标悬停在其他列表项上时，它会向第一个列表项显示删除div，并仅显示该那个。

关于它为什么要这样做的任何想法？

Answer 1

嗯......你真的需要一些帮助！

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

<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>

那么你的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的jQuery hoverIntent迭代问题

1 个答案: