Question

我的基本功能在您点击图像时会显示一个弹出窗口，并允许您浏览朋友列表并使用弹出窗口中的一个交换页面上的当前图片。交换工作正常，但我的功能似乎多次启动 - 我知道这一点，因为d变量多次显示在控制台中。在第一次使用时，它会出现一次。在第二个，它出现两次，等等。

我想它与$（'#friendslist li'）有关。点击主循环内部的函数，并且一旦图片被替换，它或者不是“关闭”，或者与某些事情有关变量范围。

$('img[name=pop]').click(function(e) {
        //pop up
    var p = $(this);
    var position = p.position();
    var offset = p.offset();
    $('#friendlist').css("left", position.left + $(this).width() );
    $('#friendlist').css("top", 0);
    $('#friendlist').toggle();
    //console.log( this );
    //console.log( position.top + " " + offset.top + " " + e.pageY );       

        //listener for the friendslist, retrieves the uid of the friend chosen
    var pointer = $(this).attr("id");
    var c = 0;
    console.log( "before c: " + c );
    $('#friendlist li').click(function( ){
        var d = 0;
        console.log( "inner d: " + d );
        if( d < 1){
            pictureReplace( pointer , $(this).attr("id") ); //function that swaps the img
            $('#friendlist').hide();
            d++;
        }
    });
});

以下是该页面的基本HTML：

<div id="main_page">

<div>
    <img src="https://graph.facebook.com/<?php echo $friendList[0]['id']; ?>/picture" name="pop" id="friend1" />
    <?php echo $friendList[0]['name']; ?>
</div>

<div>
    <img src="img/<?php echo $friendList[1]['id']; ?>" name="pop"  id="friend2" />
    <?php echo $friendList[1]['name']; ?>
</div>

<div>
    <img src="img/<?php echo $fb_me['id']; ?>" />
    <?php echo $me['name']; ?>
</div>

<div>
        <img src="img/<?php echo $friendList[2]['id']; ?>" name="pop" id="friend3" />
        <?php echo $friendList[2]['name']; ?>
</div>

<?php //create the friends list for the search ?>
<div id="friendlist">
    <div>People</div>
    <input type="text" id="fsearch" name="fsearch" class="" />
    <ul id="friends_ul">
    <?php
        $li_num = 1;
        foreach($friendList as $key => $val){
    ?>
        <li id="li_id_<?php echo $li_num; ?>">
            <img src="img/<?php echo $val['id']; ?>" />       
            <label><?php echo $val['name']; ?></label>
            <input type="hidden" name="hiddenid" value="<?php echo $val['id']; ?>">
        </li>       
    <?php
        $li_num++;
    }
    ?>
    </ul>
</div>
</div>

Answer 1

每当您点击图片时，您都会向$('#friendlist li')添加新的事件处理程序。

在添加新处理程序之前，我会快速解决现有处理程序unbind ^[docs]：

$('#friendlist li').unbind('click').click(...

我可能只会将处理程序绑定到一次，使用共享变量和event delegation（我真的不明白你的c和d变量是什么正在做，所以我删除了它们：

(function() {
    var pointer,
        $friendlist = $('#friendlist');


    $('img[name="pop"]').click(function() {
        //pop up
        var $p = $(this),
            position = $p.position(),
            offset = $p.offset();

        $friendlist.css({
            left: position.left + $p.width(),
            top: 0
        }).toggle();

        pointer = this.id;
    });

    $friendlist.delegate('li', 'click', function() {
        pictureReplace(pointer, this.id); //function that swaps the img
        $friendlist.hide();
    });

}());

另请注意，name为not a valid attribute for image elements。我会使用一个类，以便您可以使用$("img.pop")选择元素。

jQuery函数循环或不结束

1 个答案: