如何透過點擊按鈕隱藏某些 div？

Question

我正在尋找一種方法，透過使用按鈕onclick事件來隱藏一定數量的div。我知道它可能與.toggleClass('.AddCSSClassHere')有關，但我不太確定...我可以隱藏/顯示一個div，但不能父親div中的特定div。 jquery來自我之前想要使用的程式碼片段。當您按一下「顯示列」按鈕時，需要顯示或隱藏所有具有hidethis類別「」的div$('button').click(functio

P粉345302753 · Answer

您需要上一層才能找到目標元素作為同級元素。縮排區塊級元素的內容有助於更好地視覺化。

如果您想切換所有容器中的所有此類元素，則需要引入一個新類別以在刪除該類別時追蹤它們，或者將它們全部選中並使用該元素列表。 p>

$(function() {
  const elsToToggle = $('.hidethis');

  $('.show-this-data').click(function() {
    $(this).parent().siblings('div').toggleClass('hidethis ');
  });

  $('.show-all-data').click(function() {
    elsToToggle.toggleClass('hidethis');
  });
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: #fff;
  padding: 0;
  margin: 0;
  font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif;
  font-size: 16px;
}

.quotation {
  height: 100%;
  overflow: auto;
}

.main-div {
  position: sticky;
  top: 0;
}

.header-div {
  display: flex;
  padding: 5px 0;
  background-color: #fff;
}

.titles {
  display: flex;
  width: 100%;
  align-items: center;
}

.currencyinfo {
  width: fit-content;
  max-width: 100px;
  min-width: 100px;
  text-align: center;
  padding: 0;
}

.info {
  width: fit-content;
  max-width: 100px;
  min-width: 100px;
  text-align: center;
  padding: 10px 0;
}

.currency {
  max-width: 70px;
  min-width: 70px;
}

.table-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  overflow-y: scroll;
}

.main-div-info {
  display: flex;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.div-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 0;
  align-items: center;
}

.hidethis {
  display: none;
}




  
    
      
        
          
          
        
        
        
        
        Local
        
        
        
      
    
  

  
    
      
        Product name
        ID
        Quantity
        Periods
         
        Unit Price
        Unit Cost
        Unit Discount
      
    
  
  
    
      
        Full Throttle
         
        1.0
        1.0
        USD
        37.50
        0.0
        0.0