javascript – JQuery在外部点击时隐藏了多个相似id的div

2023年6月24日 263次阅读

如果没有点击任何这些div,我想隐藏所有具有相似id的div.在我的代码中,它仅适用于第一个div,因为我使用index [0]来获取id.我想将它概括为适用于所有id.

这是代码：

$(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

最佳答案 这里的简单解决方案是在所有元素上使用公共类.然后,您可以使用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>

I cannot make any changes in HTML like adding classes

在这种情况下,您可以检查单击元素的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>
点赞