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 das Button-OnClick-Ereignis verwende.

Ich weiß, dass es etwas mit .toggleClass('.AddCSSClassHere') zu tun haben könnte, aber ich bin mir nicht wirklich sicher ... Ich kann ein Div ein-/ausblenden, aber nicht eine in der übergeordneten Div-spezifischen Div. jquery stammt aus einem Codeausschnitt, den ich früher verwenden wollte. Alle Divs mit der hidethis-Klasse „“ müssen angezeigt oder ausgeblendet werden, wenn Sie auf die Schaltfläche „Spalten anzeigen“ klicken

$('button').click(function() {
  $(this).siblings('div').toggleClass('hidethis ');
});

* {
  Rand: 0;
  Polsterung: 0;
}

html,
Körper {
  Höhe: 100 %;
}

Körper {
  Hintergrund: #fff;
  Polsterung: 0;
  Rand: 0;
  Schriftfamilie: Myriad-Pro, Arial, „Varela Round“, serifenlos;
  Schriftgröße: 16px;
}

.Zitat {
  Höhe: 100 %;
  Überlauf: automatisch;
}

.main-div {
  Position: klebrig;
  oben: 0;
}

.header-div {
  Anzeige: Flex;
  Polsterung: 5px 0;
  Hintergrundfarbe: #fff;
}

.titles {
  Anzeige: Flex;
  Breite: 100 %;
  align-items: center;
}

.currencyinfo {
  Breite: fit-content;
  maximale Breite: 100 Pixel;
  Mindestbreite: 100 Pixel;
  Textausrichtung: Mitte;
  Polsterung: 0;
}

.die Info {
  Breite: fit-content;
  maximale Breite: 100 Pixel;
  Mindestbreite: 100 Pixel;
  Textausrichtung: Mitte;
  Polsterung: 10px 0;
}

.Währung {
  maximale Breite: 70 Pixel;
  Mindestbreite: 70 Pixel;
}

.table-info {
  Anzeige: Flex;
  Flexrichtung: Reihe;
  Flex-Wrap: wickeln;
  Breite: 100 %;
  overflow-y: scrollen;
}

.main-div-info {
  Anzeige: Flex;
  Textausrichtung: Mitte;
  Flexrichtung: Reihe;
  Flex-Wrap: wickeln;
  Breite: 100 %;
}

.div-info {
  Anzeige: Flex;
  Flexrichtung: Reihe;
  Flex-Wrap: wickeln;
  Breite: 100 %;
  Polsterung: 10px 0;
  align-items: center;
}

.hidethis {
  Anzeige: keine;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" Integrität ="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<Abschnitt class="quotation">

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="currencyinfo Produkttitel">
          <button class="show-this-data">Spalten anzeigen</button>
        </div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo hidethis" style="border-left: 1px solid #bdbdbd;">Local</div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
      </div>
    </div>
  </div>

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title">Produktname</div>
        <div class="info">ID</div>
        <div class="info">Menge</div>
        <div class="info">Zeiträume</div>
        <div class="info hidethis">&nbsp;</div>
        <div class="info hidethis">Stückpreis</div>
        <div class="info hidethis">Stückkosten</div>
        <div class="info hidethis">Einheitsrabatt</div>
      </div>
    </div>
  </div>
  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title"><i class="fa fa-chevron-down rotation" aria-hidden="true"></i><a href="#"> ;Vollgas</a></div>
        <div class="info">&nbsp;</div>
        <div class="info">1.0</div>
        <div class="info">1.0</div>
        <div class="info hidethis">USD</div>
        <div class="info hidethis">37,50</div>
        <div class="info hidethis">0.0</div>
        <div class="info hidethis">0.0</div>
      </div>
    </div>
  </div>
</section>

Answer 1

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="quotation">

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="currencyinfo product-title">
          <button class="show-this-data">show columns in this block</button>
          <button class="show-all-data">show columns in all blocks</button>
        </div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo hidethis" style="border-left: 1px solid #bdbdbd;">Local</div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
      </div>
    </div>
  </div>

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title">Product name</div>
        <div class="info">ID</div>
        <div class="info">Quantity</div>
        <div class="info">Periods</div>
        <div class="info hidethis">&nbsp;</div>
        <div class="info hidethis">Unit Price</div>
        <div class="info hidethis">Unit Cost</div>
        <div class="info hidethis">Unit Discount</div>
      </div>
    </div>
  </div>
  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title"><i class="fa fa-chevron-down rotate" aria-hidden="true"></i><a href="#">Full Throttle</a></div>
        <div class="info">&nbsp;</div>
        <div class="info">1.0</div>
        <div class="info">1.0</div>
        <div class="info hidethis">USD</div>
        <div class="info hidethis">37.50</div>
        <div class="info hidethis">0.0</div>
        <div class="info hidethis">0.0</div>
      </div>
    </div>
  </div>
</section>