I want to hide all the div
with similar id
if not clicked on any of those div's. In my code it is working only for the first div since I have use index[0]
to fetch the id. I want to generalize it to work for all the id.
如果没有单击任何一个div,我想隐藏所有具有类似id的div。在我的代码中,它只对第一个div起作用,因为我使用索引[0]获取id。
Here is the code:
这是代码:
$(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>
小提琴
2 个解决方案
#1
3
The simple solution here is to use a common class on all the elements. You can then use is()
to determine if e.target
was one of those elements and hide/show them as needed. Try this:
这里的简单解决方案是在所有元素上使用公共类。然后可以使用is()来确定e。目标是其中一个元素,并根据需要隐藏/显示它们。试试这个:
$(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>
I cannot make any changes in HTML like adding classes
我不能在HTML中做任何改变,比如添加类
In that case you can check the id
of the clicked element to see if it begins with div_
. If not, then hide all the divs, something like this:
在这种情况下,您可以检查单击元素的id,看看它是否以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>
#2
-1
Hey you can use this function
你可以用这个函数
if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){
$('[id^=div_]').hide();
}
filter
function will filter the selected div in list of div
whoes id
starts with div
过滤器函数将在div whoes id以div开始的列表中过滤选定的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>
#1
3
The simple solution here is to use a common class on all the elements. You can then use is()
to determine if e.target
was one of those elements and hide/show them as needed. Try this:
这里的简单解决方案是在所有元素上使用公共类。然后可以使用is()来确定e。目标是其中一个元素,并根据需要隐藏/显示它们。试试这个:
$(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>
I cannot make any changes in HTML like adding classes
我不能在HTML中做任何改变,比如添加类
In that case you can check the id
of the clicked element to see if it begins with div_
. If not, then hide all the divs, something like this:
在这种情况下,您可以检查单击元素的id,看看它是否以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>
#2
-1
Hey you can use this function
你可以用这个函数
if(e.target.id=="" || $('[id^=div_]').filter('#'+e.target.id).length==0){
$('[id^=div_]').hide();
}
filter
function will filter the selected div in list of div
whoes id
starts with div
过滤器函数将在div whoes id以div开始的列表中过滤选定的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>