Question

我坚持这一点，在Jquery的onclick中显示HTMl的特定div，我尝试了以下代码并没有得到答案，

$(function() {
    var moveLeft = 20;
    var moveDown = 10;

    $('a#trigger').click(function(e) {
        $('div#pop-up').show()
            .css('top', e.pageY + moveDown)
            .css('left', e.pageX + moveLeft)
            .appendTo('body');
        }, function() {
            $('div#pop-up').hide();
    });
    $('a#trigger').mousemove(function(e) {
        $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    });
});

在这里，我尝试了hover()方法，而不是click()方法，当我放click()时，它的工作方式不行，但我需要click()方法才能工作，怎么做我实现了吗？请帮忙......

Answer 1

因为UNLIKE hover（），click（）方法仅支持单个处理程序。
请参阅： http://api.jquery.com/click/

所以在你的情况下，请注意代码片段：

                $('a#trigger').click(function(e) {
                    $('div#pop-up').show()
                    .css('top', e.pageY + moveDown)
                    .css('left', e.pageX + moveLeft)
                    .appendTo('body');
                }, function() {
                    $('div#pop-up').hide();
                });

第一个函数，您打算在点击时执行，实际上是作为无意义的事件数据传递。 每次点击＃触发器时，它都是正在执行的第二个功能。

您可以像这样对它进行编码：

var triggerState = 0;
$('a#trigger').click(function(e) {
    if (triggerState === 0) {
        $('div#pop-up').show()
        .css('top', e.pageY + moveDown)
        .css('left', e.pageX + moveLeft)
        .appendTo('body');
        triggerState = 1;
    }
    else if (triggerState === 1) {
        $('div#pop-up').hide();
        triggerState = 0;
    }
});

我认为你犯了一个错误，认为点击就像悬停一样，接受两个不同状态的函数 - 遗憾的是没有 - mouseover和mouseout明确无法跟踪状态，但是，“备用点击”并不是明确的状态可跟踪，因此jQuery点击不提供此功能。

Answer 2

试试这个：

$(function() {
    var moveLeft = 20;
    var moveDown = 10;

    $('a#trigger').click(function(e) {

        if($('div#pop-up').length)
        {
            $('div#pop-up').toggle();
        }
        else
        {
             $('div#pop-up')
                .css({'top': e.pageY + moveDown,'left': e.pageX + moveLeft})
                .appendTo('body').show();
        }
    });

    $('a#trigger').mousemove(function(e) {
        $("div#pop-up").css({'top': e.pageY + moveDown,'left': e.pageX + moveLeft});
    });
});

Jquery：Popover onclick事件

2 个答案: