当您单击这些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();
}
});
对这些 #divs 进行分组的正确解决方案是什么?
你的选择器是错误的 - 使用圆括号,并在引号之间放置所有逗号分隔的 id,如下所示:
var container = $("#div1, #div2, #div3, #div4");
然后container
变量的所有函数都将影响所有这些元素。
试试这个:
$(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();
}
}
});
你可以
用这种方式做到这一点。
.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>