JQuery在外部点击时隐藏了多个具有相似ID的div
我想隐藏所有div与id类似，如果没有点击任何这些div的。在我的代码中，它仅适用于第一个div，因为我使用index[0]来获取该ID。我想推广它为所有的id工作。JQuery在外部点击时隐藏了多个具有相似ID的div
下面是代码：
$(window).click(function(e) {
if (e.target.id != $('[id^=div_]')[0].id) {
$('[id^=div_]').hide();
}
});div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
<div id="div_4">Four</div>
这里的简单的解决方法是使用一个通用类上的所有元素。然后，您可以使用is()来确定e.target是否是其中一个元素，并根据需要隐藏/显示它们。试试这个：
$(window).click(function(e) {
if (!$(e.target).is('.div')) {
$('.div').hide();
}
});div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1" class="div">One</div>
<div id="div_2" class="div">Two</div>
<div id="div_3" class="div">Three</div>
<div id="div_4" class="div">Four</div>我不能在HTML的任何更改，如增加类
在这种情况下，你可以检查id点击的元素，看它是否从div_开始。如果没有，那么隐藏所有的div，像这样：
$(window).click(function(e) {
if (e.target.id.indexOf('div_') != 0) {
$('[id^=div_]').hide();
}
});div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1" class="div">One</div>
<div id="div_2" class="div">Two</div>
<div id="div_3" class="div">Three</div>
<div id="div_4" class="div">Four</div>问题是我无法在HTML中进行任何更改。我无法在HTML中添加任何课程 –
好的 - 我为你更新了答案 –
感谢它的工作。伟大的解决方案。没有想到它。 –
嘿，你可以使用这个功能
if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){
$('[id^=div_]').hide();
}
filter功能将在div名单中筛选选定的div whoes id以div开头
$(window).click(function(e) {
if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){
$('[id^=div_]').hide();
}
});div {
height: 150px;
width: 150px;
display: inline-block;
background: green;
margin: 10px;
color: #fff;
text-align: center;
line-height: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div_1">One</div>
<div id="div_2">Two</div>
<div id="div_3">Three</div>
<div id="div_4">Four</div>
添加一个类，并隐藏所有的类。 – Paddy
所以你不想隐藏任何div如果他们被点击？你在问什么？为什么不使用类/名称 –
@ A.Lau是的我想隐藏他们，如果点击外面。 –