Optymalizacja kodu JavaScript

Question

Witam

Oto mam taki kod

$("#rozsuwany_div").click(function() {
});

i drugi kod

$("#rozsuwany_div_drugi").click(function() {
});

i jak mógłbym to zoptymalizować aby w jednej funkcji określić że po kliknięciu diva

#rozsuwany_div_drugi

lub

#rozsuwany_div

ma wywołać się dana funkcja , nie wiem właśnie jak się za to zabrać a bardzo mi na tym zależy

Answer 1

<div class="divDoRozsuniecia" id="peirwszy">1</div>
<div class="divDoRozsuniecia" id="drugi">2</div>

const divs = document.getElementsByClassName('divDoRozsuniecia');

for(let i=0; i<divs.length; i++) {
  divs[i].addEventListener('click', function() {
    console.log(this.innerText);
  })
}

 

Comments

Można jeszcze lepiej, robiąc event delegation. Wówczas odpada nam pętla i mamy tylko jeden handler.

Answer 2

Może po prostu napisz jedną funkcje i wywołaj ją w obu tych eventListnerach

<button id="first">Pierwszy button</button>
<button id="second">Drugi button</button>

var someFunction = function() {
	alert('button was clicked');
}
$('#first').click(function(){
	someFunction();
})
$('#second').click(function(){
	someFunction();
})

Comments

a jak to będzie wyglądało w kodzie

---

Jestem na obiedzie, będę za 30min przy kompie to ci pokaże

Answer 3

W jquery uchwyt $('selektor') jest bardzo elastyczny. Pobiera kolekcje elementów i wykonuje na nich automatycznie pętle. Tzn ,że dodając zdarzenie do kolekcji można je wykonać na aktualnie wywołanym elemencie.

PRZYKŁAD

<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>

body{
  background-color: #000;
}
.div{
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: green;
  color: #fff;
  margin: 2px;
  cursor: pointer;
}

$('.div').click(function(){
  $(this).animate({
    width: '100px',
  });
});

Dodaj jquery przed odpaleniem.