Bagaimana untuk menyembunyikan div tertentu dengan mengklik butang?
P粉193307465
2023-09-04 15:51:01
<p>Saya sedang mencari cara untuk menyembunyikan bilangan div tertentu dengan menggunakan acara butang onclick. </p>
<p>Saya tahu ia mungkin ada kaitan dengan <code>.toggleClass('.AddCSSClassHere')</code> 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"</p>
<p>
<pre class="brush:js;toolbar:false;">$('button').klik(function() {
$(this).siblings('div').toggleClass('hieththis ');
});</pre>
<pre class="brush:css;toolbar:false;">* {
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;
}</pre>
<pre class="brush:html;toolbar:false;"><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"> </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"> </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></pre>
</p>
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. p>