Saya memiliki masalah dengan kode saya. Sekarang jika saya mengklik elemen pertama, semua elemen akan menjadi merah, jika saya mengklik kedua kalinya mereka akan menjadi hijau. Saya ingin memiliki dua acara independen untuk setiap elemen dengan kelas fa-hati. Saya akan menjelaskan lebih baik: Jika saya mengklik pertama kali elemen DOM pertama, hanya elemen ini yang akan menjadi merah, dan jika saya mengkliknya untuk kedua kalinya, itu akan menjadi hijau, dan untuk yang lainnya. Saya minta maaf jika permintaan saya tidak jelas. Terima kasih banyak atas bantuan Anda.

<script src="https://kit.fontawesome.com/a1d70a0cda.js"></script>
<a onclick="change()"><i class="fas fa-heart"></i></a>
<a onclick="change()"><i class="fas fa-heart"></i></a>
<a onclick="change()"><i class="fas fa-heart"></i></a>

<script>
 function change(){
      var a = document.querySelectorAll('.fa-heart');
      var qty = a.length;
      var i = 0;

      for(i; i<qty; i++){
         if(a[i].style.color !== 'red'){
             a[i].style.color = 'red';
         }else{
             a[i].style.color='green';
           }
     }
}
</script>
0
ulisse0744 2 Juni 2019, 03:30

1 menjawab

Ini dia. Ini akan mengubah yang diklik menjadi hijau dan yang lainnya menjadi merah.

function change(clicked) {
  document.querySelectorAll('a').forEach(el => el.setAttribute("style", "color:red"));
  clicked.style.cssText ="color:green;";
}
<script src="https://kit.fontawesome.com/a1d70a0cda.js"></script>
<a onclick="change(this)"><i class="fas fa-heart"></i></a>
<a onclick="change(this)"><i class="fas fa-heart"></i></a>
<a onclick="change(this)"><i class="fas fa-heart"></i></a>
0
Randy Casburn 2 Juni 2019, 01:20