Wie verstecke ich bestimmte Divs, indem ich auf eine Schaltfläche klicke?

Question

Ich suche nach einer Möglichkeit, eine bestimmte Anzahl von Divs auszublenden, indem ich ein Button-OnClick-Ereignis verwende. Ich weiß, dass es möglicherweise etwas mit .toggleClass('.AddCSSClassHere') zu tun hat, aber ich bin mir nicht wirklich sicher ... Ich kann ein Div ein-/ausblenden, aber nicht ein bestimmtes Div innerhalb des übergeordneten Div. jquery stammt aus einem früheren Codeausschnitt, den ich verwenden wollte. Wenn ich auf die Schaltfläche „Spalten anzeigen“ klicke, muss ich alle Divs mit hidethis class „“$(‘button‘).click(functio

P粉345302753 · Answer

您需要上一级才能找到目标元素作为同级元素。缩进块级元素的内容有助于更好地可视化。

如果您想切换所有容器中的所有此类元素，则需要引入一个新类以在删除该类时跟踪它们，或者将它们全部选中并使用该元素列表。

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

Wie verstecke ich bestimmte Divs, indem ich auf eine Schaltfläche klicke?

Antworte allen(1)Ich werde antworten