Jquery 单击、隐藏和显示 div 多项
[英]Jquery On Click, Hide and Show div Multi Items
问题描述
Can someone help me?
有人能帮我吗？
I want to hide div when clicking, but other div is still active, this code actually works fine but this code is less effective and time consuming, is there a way to make it easier or is there a similar way, this I will not only input 3 items but more than 10 item我想在点击时隐藏 div，但其他 div 仍然处于活动状态，这段代码实际上工作正常，但这段代码效率较低且耗时，有没有办法让它更容易或有类似的方法，这个我不仅会输入 3 项但超过 10 项
$(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 个解决方案
解决方案1
4 已采纳 2020-11-26 13:19:25
The whole point of classes, compared to IDs, is that they don't have to be unique and can be reused, avoiding you to repeat your code.与 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
2 2020-11-26 13:19:21
You don't need a class to identify every element.您不需要 class 来识别每个元素。 You should use id for that.您应该为此使用 id 。 But in this case, you can apply a set of rules for all your element by using only one or two classes.但是在这种情况下，您可以只使用一个或两个类来为所有元素应用一组规则。 So by using jQuery you can shorten your code above like this...因此，通过使用 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>
解决方案3
2 2020-11-26 13:20:35
You could give all the elements the same "goo" class.您可以为所有元素赋予相同的“goo”class。 Like this像这样
<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>
and then set to all to show on click and set the element that was clicked to hide using the "this" keyword然后设置为全部以在点击时显示并使用“this”关键字将被点击的元素设置为隐藏
$(function(){
$('.myDiv').on("click",function(){
$('.goo').show();
$(this).find('.goo').hide();
});
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.