javascript - jQuery Bubble Popup v.3 的 HasBubblePopup 函数返回 True 的问题

Question

我需要在点击时创建气泡弹出窗口，但我在打开无限气泡时遇到了麻烦。我一次只需要打开一个弹出窗口，所以我添加了:

if ($('.icon').HasBubblePopup()) {alert('请先关闭当前弹出窗口，然后再打开另一个弹出窗口。');返回假； }

我的问题是，打开和关闭一两个弹出窗口后会出现此警报，即使看起来没有打开弹出窗口。

我的 HTML:

<img id="icon01" class="icon" src="images/icon01.png">
<img id="icon02" class="icon" src="images/icon02.png">
<img id="icon03" class="icon" src="images/icon03.png">

我的 jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-bubble-popup-v3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var icon01 = 
        '<div class="popup">' +
        '<h2>First Title</h2>' +
        '<p>Sweet jelly beans macaroon cheesecake cookie caramels chocolate cake gummi bears muffin.</p>' +
        '</div>';
    var icon02 = 
        '<div class="popup">' +
        '<h2>Second Title</h2>' +
        '<p>Bonbon lollipop soufflé halvah chupa chups jelly beans.</p>' +
        '</div>';
    var icon03 = 
        '<div class="popup">' +
        '<h2>Third Title</h2>' +
        '<p>Pastry bear claw wafer candy candy sweet roll chocolate bar chocolate cake.</p>' +
        '</div>';

    $('.icon').click(function() {
        var iconID = this.id;

        if ($('.icon').HasBubblePopup()) {
            alert('Please close current popup before opening another.');
            return false;
        }

        $('.icon').CreateBubblePopup();
        var iconClick = $(this);
        var bubblePopupID = iconClick.GetBubblePopupID();
        iconClick.ShowBubblePopup({
            position : 'top',
            align    : 'center',
            innerHtml: eval(iconID),
            innerHtmlStyle: {
                                color:'#000',
                                'text-align':'center'
                            },
            themeName:  'grey',
            themePath:  'images/jquerybubblepopup-themes'
        }, false);

        iconClick.FreezeBubblePopup();
        $('#' + bubblePopupID).click(function() {
            $(iconClick).RemoveBubblePopup();
        });
    });
});
</script>

我正在处理的页面:http://www.dynasoft2000.com/fire

编辑:我决定关闭当前弹出窗口并打开新弹出窗口而不是使用警报，这是一个更好的解决方案。这是我的最终代码:

    $('.icon').click(function() {
        var iconID = this.id;

        if ($('.icon').map(function() {
            if ($(this).HasBubblePopup())
                return true;
        })[0]) {
            $('.icon').RemoveBubblePopup();
        }

        var iconClick = $(this);
        iconClick.CreateBubblePopup();
        var bubblePopupID = iconClick.GetBubblePopupID();
        iconClick.ShowBubblePopup({
            position : 'top',
            align    : 'center',
            innerHtml: eval(iconID),
            innerHtmlStyle: {
                                color:'#000',
                                'text-align':'center'
                            },
            themeName:  'grey',
            themePath:  'images/jquerybubblepopup-themes'
        }, false);

        iconClick.FreezeBubblePopup();
        $('#' + bubblePopupID).click(function() {
            $(iconClick).RemoveBubblePopup();
        });
    });

Answer 1

创建buble时应该中继到当前元素，HasBublePipup也可以工作，我用map包裹它；将代码更改为:

$('.icon').click(function() {
        var iconID = this.id;

        if ($('.icon').map(
           function() {
            if ($(this).HasBubblePopup()) return true;
            }
           )[0]); { //<-HERE
            alert('Please close current popup before opening another.');
            return false;
        }
        var iconClick = $(this);
        iconClick.CreateBubblePopup(); // <-- AND HERE
        var bubblePopupID = iconClick.GetBubblePopupID();
        iconClick.ShowBubblePopup({
            position : 'top',
            align    : 'center',
            innerHtml: eval(iconID),
            innerHtmlStyle: {
                                color:'#000',
                                'text-align':'center'
                            },
            themeName:  'grey',
            themePath:  'images/jquerybubblepopup-themes'
        }, false);
        iconClick.FreezeBubblePopup();
        $('#' + bubblePopupID).click(function() {
            $(iconClick).RemoveBubblePopup();
        });
    });