logo标签列表

jQuery点击事件：隐藏和显示多个项目的DIV

javascripthtmljquerycss
4

有人能帮我吗？

我想在单击时隐藏某个div，但其他div仍然可以使用。这段代码实际上可以正常工作，但它的效率不高且耗时，是否有更简单或类似的方法来实现呢？我将输入超过10个而不仅是3个项。

$(function() {
  $(document).on("click", "div.myDiv", function(e) {
    $('.goo').css('display', 'none');
    $('.goo2').css('display', 'block');
    $('.goo3').css('display', 'block');
  });
})

$(function() {
  $(document).on("click", "div.myDiv2", function(e) {
    $('.goo').css('display', 'block');
    $('.goo2').css('display', 'none');
    $('.goo3').css('display', 'block');
  });
})

$(function() {
  $(document).on("click", "div.myDiv3", function(e) {
    $('.goo').css('display', 'block');
    $('.goo2').css('display', 'block');
    $('.goo3').css('display', 'none');
  });
})
.myDiv {
  border: 1px solid gray;
  margin: 10px;
}

.myDiv2 {
  border: 1px solid gray;
  margin: 10px;
}

.myDiv3 {
  border: 1px solid gray;
  margin: 10px;
}

.goo {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

.goo2 {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}

.goo3 {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv">
  <div class="goo"></div>
  Test1
</div>
<div class="myDiv2">
  <div class="goo2"></div>
  Test2
</div>
<div class="myDiv3">
  <div class="goo3"></div>
  Test3
</div>

3个回答
4
与ID相比，类的整个意义在于它们不必是唯一的，可以被重复使用，从而避免您重复编写代码。 

const $allGoos = $(".goo");

$(".myDiv").click(function() {
  $allGoos.show();
  $(this).find('.goo').hide();
});
.myDiv {
  border: 1px solid gray;
  margin: 10px;
}

.goo {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  width: 90%;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myDiv">
  <div class="goo"></div>
  Test1
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test2
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test3
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test4
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test5
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test6
</div>
<div class="myDiv">
  <div class="goo"></div>
  Test7
</div>

2

不需要为每个元素都单独指定类名，可以使用ID来实现。但在某些情况下，你只需使用一个或两个类就可以给所有元素应用一组规则。

因此，通过使用jQuery，您可以像这样缩短上面的代码...

$(".goo").click(function (e) {
  $(".goo").css("display","block")
  $(this).css("display","none")
});
.myDiv
{
  border:1px solid gray;
  margin:10px;
}
.goo
{
  position: absolute;
  background: rgba(0,0,0,0.5); 
  border-radius: 5px;
  width:90%;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="myDiv">
    <div class="goo"> </div>
    Test1
  </div>
  <div class="myDiv">
    <div class="goo"></div>
    Test2
  </div>
  <div class="myDiv">
    <div class="goo"></div>
      Test3
  </div>
</body>
</html>

1
不确定为什么要使用 preventDefault()，因为您没有提交表单。此外，.css("display","block") 和 .css("display","none") 可以简化为 .show() 和 .hide()。 - Jeremy Thille
@Vuien 没问题。你也可以使用 hide() 和 show() 函数。jQuery 有非常实用的函数。但我想让你看到发生了什么，所以我使用了你的 css() 方法。 - Danilo Ivanovic
@JeremyThille 我正在使用 Visual Code。我安装了 jQuery 的快捷方式，所以它自动填充了。我已经将其删除。谢谢。 - Danilo Ivanovic
@JeremyThille 就像我在对 Vuien 的评论中所说的那样，我知道 .hide() 和 .show()。但我希望他能看到使用自己的方法会发生什么。 - Danilo Ivanovic
2
您可以为所有元素分配相同的“goo”类。像这样：
  <div class="myDiv">
    <div class="goo"> </div>
    Test1
  </div>
  <div class="myDiv">
    <div class="goo"></div>
    Test2
  </div>
  <div class="myDiv">
    <div class="goo"></div>
      Test3
  </div>

然后将所有内容设置为在点击时显示，并使用“this”关键字将被点击的元素隐藏。

$(function(){
     $('.myDiv').on("click",function(){
         $('.goo').show();
         $(this).find('.goo').hide();
     });    
 })
可能会出现将点击处理程序附加到.goo的问题。实际上，这些基本上是背景div。如果有任何东西在它前面，它就无法捕获点击事件。用户将单击“Test1”，但什么也不会发生，因为文本阻止了下面的.goo的点击。 - Jeremy Thille
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接