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

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

$(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的元素添加和删除一个

popover活动的

类。但也许有更好的解决办法。我正在考虑使用一个变量来跟踪所选元素，例如：

$(document).ready(function() {

    var $activePopover = $();

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

});

---

所以我的问题是：哪种方法更适合使用，为什么？有没有其他解决方案比这两个都好？

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

---

我认为跟踪类是最好的解决方案，因为popover绑定到元素。如果引入变量，则必须同步它，以确保它与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");
});

---

第二种方法很好用。第一种方法会修改DOM，第二种方法不会。第二种方法更快，更易于维护。我建议使用第二种方法。保留对元素的引用不是一件麻烦的事，您不需要脚本浏览整个DOM来检索活动元素。另外，第一种方法可能会失败如果您的类没有因为意外错误而被删除，那么一次将显示两个弹出窗口。感谢您对连字符的提醒。不幸的是，我认为在这种情况下使用事件处理程序不起作用。我的实际代码稍微复杂一些——我只是发布了相关部分——需要手动触发弹出窗口。

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

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

        return;
    }

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