多次点击的Jquery事件

【问题标题】：Jquery events on multiple clicks多次点击的Jquery事件
【发布时间】：2013-11-22 19:04:24
【问题描述】：

我试图让Tipsy Tooltip 在点击时显示，并在第二次点击时消失。同样，工具提示不会在第一次（奇数）单击时显示。而是在第三次点击时显示。

HTML

<p id="more_pricing_info">
<a id="more_pricing_info_tooltip" rel='tipsy' title='Well hello there' onclick='$("#more_pricing_info a[rel=tipsy]").tipsy("show"); return false;'>
    More Info
</a>
</p>

Javascript

$(function() {
$('#more_pricing_info').click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
        // odd clicks
        $('#more_pricing_info a[rel=tipsy]').tipsy({trigger: 'manual', gravity: 'se'});
    } else {
        // even clicks
    }
        $(this).data("clicks", !clicks);
});
});

【问题讨论】：

标签： javascript jquery onclick tooltip show-hide

【解决方案1】：

您的元素需要一个初始的“点击”值，否则在您第一次拉动它时，您的clicks 变量是未定义。然后将其设置为 !clicks，其计算结果为 false。然后，在您第二次单击时，您的脚本会看到 clicks 为 false，因此它会跳过工具提示并将 clicks 设置为 true。在第 3 次单击时，您的代码看到 clicks 最终为真，并且工具提示触发。

为了设置 'clicks 的初始值，将此属性添加到您的锚标记：

data-clicks="true"

此外，您可能需要删除锚标记中的 onclick 属性，让您的 javascript 代码处理点击事件。

所以，这是你的新锚标记：

<p id="more_pricing_info">
<a id="more_pricing_info_tooltip" data-clicks="true" rel='tipsy' title='Well hello there' >
    More Info
</a>
</p>

【讨论】：