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
$(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>
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.
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>
You don't need a class to identify every element. You should use id for that. 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...
$(".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>
You could give all the elements the same "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
$(function(){
$('.myDiv').on("click",function(){
$('.goo').show();
$(this).find('.goo').hide();
});
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.