为 var 创建一个数组答案

【问题标题】：Creating an array for var为 var 创建一个数组
【发布时间】：2016-02-03 07:42:49
【问题描述】：

当您单击这些 div 之外的任何位置时，这应该会关闭数组中列出的所有 div，但它不起作用。

如果我要单击除 div1、div2、div3、div4 之外的任何位置，那么所有这些 div 都应该关闭。

$(document).mouseup(function (e)
{
    var container = $["#div1," "#div2", "#div3", "#div4"];

    if (!container.is(e.target) 
        && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

我可以让它在他们自己的脚本标签中适用于单个 div，但是我必须多次复制这段代码，这不是很整洁。

$(document).mouseup(function (e)
{
    var container = $("#div1");

    if (!container.is(e.target) 
        && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
$(document).mouseup(function (e)
{
    var container = $("#div2");

    if (!container.is(e.target) 
        && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
$(document).mouseup(function (e)
{
    var container = $("#div3");

    if (!container.is(e.target) 
        && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
$(document).mouseup(function (e)
{
    var container = $("#div4");

    if (!container.is(e.target) 
        && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

对这些#div 进行分组的正确解决方案是什么？

【问题讨论】：

请查看答案

标签： javascript

【解决方案1】：

您的选择器错误 - 使用圆括号并将所有逗号分隔的 id 放在引号之间，如下所示：

var container = $("#div1, #div2, #div3, #div4");

那么所有涉及container变量的函数都会影响所有这些元素。

【讨论】：

【解决方案2】：

试试这个：

 $(document).mouseup(function (e)
{
  var container = ["#div1", "#div2", "#div3", "#div4"];
  for(var i=0;i<container.length;i++)
 {
    if (!$(container[i]).is(e.target) 
    && $(container[i]).has(e.target).length === 0) 
    {
    $(container[i]).hide();
    }
 }
 });

【讨论】：

【解决方案3】：

你可以这样做。

JS：

$(document).not($("#div1, #div2, #div3, #div4")).on('click',function(){

   $(".test").hide();

})

HTML：

<div id="div1" class="test" style="background-color:red">111</div>
<div id="div2" class="test" style="background-color:blue">22</div>
<div id="div3" class="test" style="background-color:green">333</div>
<div id="div4" class="test" style="background-color:black">444</div>

<div id="div5" style="background-color:black">44455555555</div>

【讨论】：