简体   繁体   中英

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

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

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM