Bagaimana untuk menyembunyikan div tertentu dengan mengklik butang?

Question

Saya sedang mencari cara untuk menyembunyikan bilangan div tertentu dengan menggunakan acara butang onclick.

Saya tahu ia mungkin ada kaitan dengan .toggleClass('.AddCSSClassHere') tetapi saya tidak begitu pasti... saya boleh menyembunyikan/menunjukkan div tetapi tidak satu dalam div khusus div induk. jquery berasal daripada coretan kod yang saya mahu gunakan sebelum ini. Semua div dengan kelas hidethis "" perlu ditunjukkan atau disembunyikan apabila mengklik butang "Tunjukkan Lajur"

$('button').klik(function() {
  $(this).siblings('div').toggleClass('hieththis ');
});

* {
  margin: 0;
  padding: 0;
}

html,
badan {
  ketinggian: 100%;
}

badan {
  latar belakang: #fff;
  padding: 0;
  margin: 0;
  font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif;
  saiz fon: 16px;
}

.petikan {
  ketinggian: 100%;
  limpahan: auto;
}

.main-div {
  kedudukan: melekit;
  atas: 0;
}

.header-div {
  paparan: flex;
  pelapik: 5px 0;
  warna latar belakang: #fff;
}

.titles {
  paparan: flex;
  lebar: 100%;
  align-item: tengah;
}

.currencyinfo {
  lebar: muat-kandungan;
  lebar maksimum: 100px;
  lebar min: 100px;
  text-align: tengah;
  padding: 0;
}

.info {
  lebar: muat-kandungan;
  lebar maksimum: 100px;
  lebar min: 100px;
  text-align: tengah;
  pelapik: 10px 0;
}

.currency {
  lebar maksimum: 70px;
  lebar min: 70px;
}

.table-info {
  paparan: flex;
  flex-direction: baris;
  flex-wrap: bungkus;
  lebar: 100%;
  limpahan-y: tatal;
}

.main-div-info {
  paparan: flex;
  text-align: tengah;
  flex-direction: baris;
  flex-wrap: bungkus;
  lebar: 100%;
}

.div-info {
  paparan: flex;
  flex-direction: baris;
  flex-wrap: bungkus;
  lebar: 100%;
  pelapik: 10px 0;
  align-item: tengah;
}

.sembunyikan ini {
  paparan: tiada;
}

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

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="currencyinfo product-title">
          <button class="show-this-data">tunjukkan lajur</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 hidetthis"></div>
        <div class="currencyinfo hidetthis"></div>
        <div class="currencyinfo hidetthis"></div>
      </div>
    </div>
  </div>

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title">Nama produk</div>
        <div class="info">ID</div>
        <div class="info">Kuantiti</div>
        <div class="info">Tempoh</div>
        <div class="info hidetthis">&nbsp;</div>
        <div class="info hidethis">Harga Seunit</div>
        <div class="info hidethis">Kos Unit</div>
        <div class="info hidethis">Diskaun Unit</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="#"> ;Pendikit Penuh</a></div>
        <div class="info">&nbsp;</div>
        <div class="info">1.0</div>
        <div class="info">1.0</div>
        <div class="info hidetthis">USD</div>
        <div class="info hidetthis">37.50</div>
        <div class="info hidetthis">0.0</div>
        <div class="info hidetthis">0.0</div>
      </div>
    </div>
  </div>
</section>

Answer 1

Anda perlu naik satu tahap untuk mencari elemen sasaran sebagai adik beradik. Mengesot kandungan elemen peringkat blok membantu dengan visualisasi yang lebih baik.

Jika anda ingin menogol semua elemen sedemikian dalam semua bekas, anda perlu memperkenalkan kelas baharu untuk menjejakinya apabila ia dialih keluar, atau pilih kesemuanya dan gunakan senarai elemen tersebut.

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