is there a way to handle a click event whithout assigning id? - Jquery

SalimAlTarsha
September 6, 2022
181 views
0 votes
2 Answers

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" 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>

there is ten sectors , and for each of them it will show another div with description and details

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

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)

Answers

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

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

Please signup or login to give your own answer.

Click here to cancel reply.

is there a way to handle a click event whithout assigning id? – Jquery

Answers