Question

我的目标是跟踪具有活动Twitter Bootstrap弹出窗口的元素。同时只能有一个这样的元素。这是相关的代码：

$(document).ready(function() {

    $(".word").on("click", function(e) {
        e.stopPropagation();
        if (!$(this).hasClass("popover-active")) {
            $(".popover-active").popover("hide");
            $(".popover-active").removeClass("popover-active");
            $(this).popover("show");
            $(this).addClass("popover-active");
        }
    });

});

如上所示，我正在使用$().addClass和$().removeClass向具有活动弹出窗口的元素添加和删除popover-active类。但也许有更好的解决方案。我正在考虑使用变量来跟踪所选元素，如下所示：

$(document).ready(function() {

    var $activePopover = $();

    $(".word").on("click", function(e) {
        e.stopPropagation();
        if ($(this) !== $activePopover) {
            $activePopover.popover("hide");
            $(this).popover("show");
            $activePopover = $(this);
        }
    });

});

所以我的问题是：哪种方法更好用，为什么？您能想到的其他解决方案是否比这两种解决方案都更好？

Answer 1

你可以稍微简化它，让popover init通过javascript发生，或者完全通过数据属性发生，使用内置事件（注意我从你的变量名中删除了连字符） JS会将其解释为减号，而不是连字符）：

$(document).ready(function () {

    var $activePopover;

    $(document).on('show.bs.popover', function (e) {
        if ($activePopover) { $activePopover.popover('hide') }
        $activePopover = $(e.target);
    });

});

See it in action here

Answer 2

我认为跟踪类是最好的解决方案，因为popover绑定到元素。如果引入变量，则必须同步它以确保它与弹出状态相关。它还允许您切换到支持多个实例的不同popover插件。

我会这样做：

$(".word").on("click", function(e) {
    e.stopPropagation();
    $(this).toggleClass("popover-active");

    if ($(this).hasClass("popover-active")) {
        $(this).popover("show");

        return;
    }

    $(this).popover("hide");
});

jQuery变量或addClass（）/ removeClass（）来跟踪所选元素

2 个答案: