i have a webpage full of buttons , for opening a modal with a description related to the button.. the webpage is for mobile repair service requests...
<button id="myBtn">Open Modal</button>
<div id="myModal" >
<div >
<div >
<div >
<img src="#" />
</div>
<div >
<h3 >
Breakge
</h3>
<div >
<div >Udskiftning af Skærm
<div >
<div >
<p>Original Kvalitet </p><p >2299.99,-</p>
</div>
<div >
<p>TopKvalitet </p><p >1199.99,-</p>
</div>
<div >
<p>KobiKvalitet </p><p >799.99,-</p>
</div>
</div>
</div>
<div >Udskiftning af Batteri
<div >
<div >
<p>Batteri </p><p >549,99,-</p>
</div>
<div >
<p>TopKvakitet Batteri </p><p >649.99,-</p>
</div>
</div>
</div>
<div >Udskiftning af Bagglas
<div >
<div >
<p>Bagglas </p><p >999.99,-</p>
</div>
<div >
<p>Bagglas og Ramme </p><p >1699.99,-</p>
</div>
</div>
</div>
<div >Udskiftning af Højtaler
<div >
<div >
<p>Ørehøjtaler </p><p >599.99,-</p>
</div>
<div >
<p>Højtaler (Musik) </p><p >749.99,-</p>
</div>
</div>
</div>
<div >Udskiftning af Kamera
<div >
<div >
<p>FrontKamera </p><p >899.99,-</p>
</div>
<div >
<p>Bagkamera </p><p >1299.99,-</p>
</div>
<div >
<p>Lins </p><p >349.99,-</p>
</div>
</div>
</div>
<div >Udskiftning af Ladestik
<div >
<div >
<p>Ladestik </p><p >749.99,-</p>
</div>
<div >
<p>Vibrator </p><p >749.99,-</p>
</div>
</div>
</div>
<div >Udskiftning af knapper
<div >
<div >
<p>Tænd/Sluk funktion </p><p >749.99,-</p>
</div>
<div >
<p>Volume/Lydløs knapper </p><p >749.99,-</p>
</div>
</div>
</div>
<div >Udskiftning af Vibrator
<div >
<div >
<p>Vibrator </p><p >749.99,-</p>
</div>
</div>
</div>
<div >Ander
<div >
<div >
<p>Fejlfinding </p><p >349.99,-</p>
</div>
<div >
<p>Softwer / Gendannekse </p><p >349.99,-</p>
</div>
<div >
<p> Microchip </p><p >fra 799,99,-</p>
</div>
</div>
</div>
<div >Tilbehør
<div >
<div >
<p>PanserGlas </p><p >249.99,-</p>
</div>
<div >
<p>Cover </p><p >249.99,-</p>
</div>
</div>
</div>
</div>
</div>
<div id="right">
<h3 >
Prices
</h3>
<div >
<div >
Place Description Title Here
</div>
<div >
</div>
</div>
<div >
<div >
<input type="button" id="btnClose" value="Close">
</div>
</div>
</div>
</div>
<div >
</div>
</div>
</div>
there is ten sectors , and for each of them it will show another div with description and details
<div id="sector1">
<div >
<p>Original Kvalitet </p><p >2299.99,-</p>
</div>
<div >
<p>TopKvalitet </p><p >1199.99,-</p>
</div>
<div >
<p>KobiKvalitet </p><p >799.99,-</p>
</div>
</div>
i'm using this code to show and hide each div(sector)
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');
}
}
so my question is , is there anyway to achieve this without assigning id's for each element ? because i have to create a modal for every mobile device (about 120 devices)
CodePudding user response：
Nest div.sector within div.click. Use event delegation. If div.click is clicked add a class that hides all non hidden div.sector within div.hyperclicks. Then remove that hidden class from div.sector from the clicked element.
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 >
<div >Udskiftning af Skærm
<div >
<div >
<div>Original Kvalitet </div>
<div >2299.99,-</div>
</div>
<div >
<div>TopKvalitet </div>
<div >1199.99,-</div>
</div>
<div >
<div>KobiKvalitet </div>
<div >799.99,-</div>
</div>
</div>
</div>
<div >Udskiftning af Batteri
<div >
<div >
<div>Original Kvalitet </div>
<div >2199.99,-</div>
</div>
<div >
<div>TopKvalitet </div>
<div >1299.99,-</div>
</div>
<div >
<div>KobiKvalitet </div>
<div >699.99,-</div>
</div>
</div>
</div>
</div>CodePudding user response：
You can simplify your code by using querySelectorAll() to retrieve all the p.click elements, then looping through them to add the same event handler to each one.
The related sector can targeted by using a data attribute to store the selector for each element. Try this:
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 >
<p id="click1" data-sectorid="#sector1">Udskiftning af Skærm</p>
<p id="click2" data-sectorid="#sector2">Udskiftning af Batteri</p>
<!-- other p elements here... -->
</div>
<div id="sector1">
<div >
<p>Original Kvalitet (SECTOR 1)</p>
<p >2299.99,-</p>
</div>
<div >
<p>TopKvalitet </p>
<p >1199.99,-</p>
</div>
<div >
<p>KobiKvalitet </p>
<p >799.99,-</p>
</div>
</div>
<div id="sector2">
<div >
<p>Original Kvalitet (SECTOR 2)</p>
<p >199.99,-</p>
</div>
<div >
<p>TopKvalitet </p>
<p >299.99,-</p>
</div>
<div >
<p>KobiKvalitet </p>
<p >399.99,-</p>
</div>
</div>