有没有一种方法可以在不分配id的情况下处理点击事件

我有一个充满按钮的网页，用于打开带有与按钮相关描述的模态。。该网页用于移动维修服务请求。。。

<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-body">
<div class="left">
<img src="#" />
</div>
<div class="middle">
<h3 class="Breakge">
Breakge
</h3>
<div class="hyperclicks">
<div class="click">Udskiftning af Skærm
<div class="sector hidden">
<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>
<div class="click">Udskiftning af Batteri
<div class="sector hidden">
<div class="priceflex">
<p>Batteri </p><p class="priceitem">549,99,-</p>
</div>
<div class="priceflex">
<p>TopKvakitet Batteri </p><p class="priceitem">649.99,-</p>
</div>
</div>
</div>
<div class="click">Udskiftning af Bagglas
<div class="sector hidden">
<div class="priceflex">
<p>Bagglas </p><p class="priceitem">999.99,-</p>
</div>
<div class="priceflex">
<p>Bagglas og Ramme </p><p class="priceitem">1699.99,-</p>
</div>
</div>
</div>
<div class="click">Udskiftning af Højtaler
<div class="sector hidden">
<div class="priceflex">
<p>Ørehøjtaler </p><p class="priceitem">599.99,-</p>
</div>
<div class="priceflex">
<p>Højtaler (Musik) </p><p class="priceitem">749.99,-</p>
</div>
</div>
</div>
<div class="click">Udskiftning af Kamera
<div class="sector hidden">
<div class="priceflex">
<p>FrontKamera </p><p class="priceitem">899.99,-</p>
</div>
<div class="priceflex">
<p>Bagkamera </p><p class="priceitem">1299.99,-</p>
</div>
<div class="priceflex">
<p>Lins </p><p class="priceitem">349.99,-</p>
</div>
</div>
</div>
<div class="click">Udskiftning af Ladestik
<div class="sector hidden">
<div class="priceflex">
<p>Ladestik </p><p class="priceitem">749.99,-</p>
</div>
<div class="priceflex">
<p>Vibrator </p><p class="priceitem">749.99,-</p>
</div>
</div>
</div>
<div class="click">Udskiftning af knapper
<div class="sector hidden">
<div class="priceflex">
<p>Tænd/Sluk funktion </p><p class="priceitem">749.99,-</p>
</div>
<div class="priceflex">
<p>Volume/Lydløs knapper </p><p class="priceitem">749.99,-</p>
</div>
</div>
</div>
<div class="click">Udskiftning af Vibrator
<div class="sector hidden">
<div class="priceflex">
<p>Vibrator </p><p class="priceitem">749.99,-</p>
</div>
</div>
</div>
<div class="click">Ander
<div class="sector hidden">
<div class="priceflex">
<p>Fejlfinding </p><p class="priceitem">349.99,-</p>
</div>
<div class="priceflex">
<p>Softwer / Gendannekse </p><p class="priceitem">349.99,-</p>
</div>
<div class="priceflex">
<p> Microchip </p><p class="priceitem">fra 799,99,-</p>
</div>
</div>
</div>
<div class="click">Tilbehør
<div class="sector hidden">
<div class="priceflex">
<p>PanserGlas </p><p class="priceitem">249.99,-</p>
</div>
<div class="priceflex">
<p>Cover </p><p class="priceitem">249.99,-</p>
</div>
</div>
</div>
</div>
</div>
<div class="right" id="right">
<h3 class="Prices">
Prices
</h3>
<div class="hyperprices">
<div class="description">
Place Description Title Here
</div>
<div class="seperateline">
</div>
</div>
<div class="btngroup">
<div class="rightbtn">
<input type="button" id="btnClose" class="btn" value="Close">
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</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个设备(创建一个模式

在div.click中嵌套div.sector。使用事件委派。如果单击div.click，则添加一个在div.hyperclicks中隐藏所有未隐藏的div.sector的类。然后从单击的元素的div.sector中删除该hidden类。

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>

您可以使用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>

相关内容

最新更新

热门标签：