我有一個充滿按鈕的網頁,用于打開帶有與按鈕相關描述的模式。該網頁用于移動維修服務請求...
<div class="hyperclicks">
<p class="click" id="click1" onclick="showhidesector('sector1','click1')">Udskiftning af Sk?rm</p>
<p class="click" id="click2" onclick="showhidesector('sector2','click2')">Udskiftning af Batteri</p>
<p class="click" id="click3" onclick="showhidesector('sector3','click3')">Udskiftning af Bagglas</p>
<p class="click" id="click4" onclick="showhidesector('sector4','click4')">Udskiftning af H?jtaler</p>
<p class="click" id="click5" onclick="showhidesector('sector5','click5')">Udskiftning af Kamera</p>
<p class="click" id="click6" onclick="showhidesector('sector6','click6')">Udskiftning af Ladestik</p>
<p class="click" id="click7" onclick="showhidesector('sector7','click7')">Udskiftning af knapper</p>
<p class="click" id="click8" onclick="showhidesector('sector8','click8')">Udskiftning af Vibrator</p>
<p class="click" id="click9" onclick="showhidesector('sector9','click9')">Ander</p>
<p class="click" id="click10" onclick="showhidesector('sector10','click10')">Tilbeh?r</p>
</div>
有十個扇區,對于每個扇區,它將顯示另一個帶有描述和詳細資訊的 div
<div class="sector" id="sector1">
<div class="priceflex">
<p>Original Kvalitet </p><p class="priceitem">2299.99,-</p>
</div>
<div class="priceflex">
<p>TopKvalitet </p><p class="priceitem">1199.99,-</p>
</div>
<div class="priceflex">
<p>KobiKvalitet </p><p class="priceitem">799.99,-</p>
</div>
</div>
我正在使用此代碼顯示和隱藏每個 div(扇區)
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var btnClose = document.getElementById("btnClose");
var divState = {};
function showhidesector(id,id2) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none'; // hide
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
所以我的問題是,是否有辦法在不為每個元素分配 id 的情況下實作這一點?因為我必須為每個移動設備(大約 120 個設備)創建一個模式
uj5u.com熱心網友回復:
您可以通過使用querySelectorAll()
檢索所有p.click
元素來簡化代碼,然后遍歷它們以將相同的事件處理程式添加到每個元素。
相關扇區可以通過使用data
屬性來定位每個元素的選擇器。嘗試這個:
document.querySelectorAll('p.click').forEach(el => {
el.addEventListener('click', e => {
let sectorId = e.target.dataset.sectorid;
document.querySelector(sectorId).classList.toggle('show');
});
});
.sector { display: none; }
.sector.show { display: block; }
<div class="hyperclicks">
<p class="click" id="click1" data-sectorid="#sector1">Udskiftning af Sk?rm</p>
<p class="click" id="click2" data-sectorid="#sector2">Udskiftning af Batteri</p>
<!-- other p elements here... -->
</div>
<div class="sector" id="sector1">
<div class="priceflex">
<p>Original Kvalitet (SECTOR 1)</p>
<p class="priceitem">2299.99,-</p>
</div>
<div class="priceflex">
<p>TopKvalitet </p>
<p class="priceitem">1199.99,-</p>
</div>
<div class="priceflex">
<p>KobiKvalitet </p>
<p class="priceitem">799.99,-</p>
</div>
</div>
<div class="sector" id="sector2">
<div class="priceflex">
<p>Original Kvalitet (SECTOR 2)</p>
<p class="priceitem">199.99,-</p>
</div>
<div class="priceflex">
<p>TopKvalitet </p>
<p class="priceitem">299.99,-</p>
</div>
<div class="priceflex">
<p>KobiKvalitet </p>
<p class="priceitem">399.99,-</p>
</div>
</div>
uj5u.com熱心網友回復:
嵌套div.sector
在div.click
. 使用事件委托。如果 div.click
單擊添加一個隱藏所有非隱藏的div.sector
類div.hyperclicks
。然后從單擊的元素中洗掉hidden
該類。div.sector
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.matches(`.click`)) {
evt.target.closest(`.hyperclicks`).querySelectorAll(`div .sector:not(.hidden)`)
.forEach(d => d.classList.add(`hidden`));
evt.target.querySelector(`.sector`).classList.remove(`hidden`);
}
}
.hidden {
display: none;
}
.sector {
margin-left: 2rem;
color: green;
}
.click {
margin: 0.8rem 0;
cursor: pointer;
}
<div class="hyperclicks">
<div class="click">Udskiftning af Sk?rm
<div class="sector hidden">
<div class="priceflex">
<div>Original Kvalitet </div>
<div class="priceitem">2299.99,-</div>
</div>
<div class="priceflex">
<div>TopKvalitet </div>
<div class="priceitem">1199.99,-</div>
</div>
<div class="priceflex">
<div>KobiKvalitet </div>
<div class="priceitem">799.99,-</div>
</div>
</div>
</div>
<div class="click">Udskiftning af Batteri
<div class="sector hidden">
<div class="priceflex">
<div>Original Kvalitet </div>
<div class="priceitem">2199.99,-</div>
</div>
<div class="priceflex">
<div>TopKvalitet </div>
<div class="priceitem">1299.99,-</div>
</div>
<div class="priceflex">
<div>KobiKvalitet </div>
<div class="priceitem">699.99,-</div>
</div>
</div>
</div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/504658.html
標籤:javascript html jQuery