如何在jQuery中将DOM元素说明符存储为JS变量

How to store DOM element specifier as JS variable in jQuery?

本文关键字:存储 说明符 JS 变量 元素 DOM jQuery 中将      更新时间:2023-09-26

我刚刚开始学习jQuery,基本上我想重新创建"点击外部元素"事件。这里也提出了类似的问题:

如何检测元素外部的单击?

但这不适用于多个元素。我想在我的页面上有多个下拉框,并且一次只想看到一个。如果用户单击框外或相同的下拉链接,则打开的框必须关闭(如果用户单击不同的下拉链接则必须打开新框)。我在这里有我的代码:

http://jsfiddle.net/JvCUd/2/

我正试图将当前打开的框的jQuery说明符(或id)存储在一个全局变量中:

jsOpenedWnd = "";
$(document).ready(function()  {
...
});

我想使用的功能是:

$.fn.toggleWnd = function() {       
    if ( jsOpenedWnd != this ) {
        $(this).toggle();
        $(jsOpenedWnd).toggle();
        jsOpenedWnd = this;
    }
    else {   
        $(this).toggle();
        jsOpenedWnd = "";
    }
}

但它不能正常工作。我知道这可能是一个错误的解决方案,但只是为了学习的目的,我想知道如何使这个工作。

编辑:终于解决了。事实证明,答案一直都在我联系的问题中,我必须使用event.stopPropagation();

以下是更新后的代码(一次只有一个窗口处于活动状态):http://jsfiddle.net/HwE2N/

您可以使用.is()检查它们,因为this是jQuery包装器,而jsOpenedWnd是选择器,因此您无法使用相等对它们进行比较

$.fn.toggleWnd = function() {       
    if ( !this.is(jsOpenedWnd)) {
        $(this).toggle();
        $(jsOpenedWnd).toggle();
        jsOpenedWnd = this;
    }
    else {   
        $(this).toggle();
        jsOpenedWnd = "";
    }
}

演示:Fiddle