JQuery隐藏多个相似id的div

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>

FIDDLE

小提琴

2 个解决方案

#1

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

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>