Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Bagaimana cara mempersingkat koding javascript ini?
saya mau masukin fungsi saat mouseenter dan mouseout, saat mouse berada di atas product, harganya muncul, dan saat mouse nya beranjak, harganya kembali hilang, tapi haruskah saya membuat variabel, fungsi, dan properti mouseenter & mouseout berulang-ulang? ini baru 8 product, gimana kalau puluhan? bantuannya dong mastah :)
<script>
var hilang= document.getElementsByClassName("price")[0];
var hilang1= document.getElementsByClassName("price")[1];
var hilang2= document.getElementsByClassName("price")[2];
var hilang3= document.getElementsByClassName("price")[3];
var hilang4= document.getElementsByClassName("price")[4];
var hilang5= document.getElementsByClassName("price")[5];
var hilang6= document.getElementsByClassName("price")[6];
var hilang7= document.getElementsByClassName("price")[7];
function tampil(){
hilang.style.display="block";
}
function kembali(){
hilang.style.display="none";
}
function tampil1(){
hilang1.style.display="block";
}
function kembali1(){
hilang1.style.display="none";
}
function tampil2(){
hilang2.style.display="block";
}
function kembali2(){
hilang2.style.display="none";
}
function tampil3(){
hilang3.style.display="block";
}
function kembali3(){
hilang3.style.display="none";
}
function tampil4(){
hilang4.style.display="block";
}
function kembali4(){
hilang4.style.display="none";
}
function tampil5(){
hilang5.style.display="block";
}
function kembali5(){
hilang5.style.display="none";
}
function tampil6(){
hilang6.style.display="block";
}
function kembali6(){
hilang6.style.display="none";
}
function tampil7(){
hilang7.style.display="block";
}
function kembali7(){
hilang7.style.display="none";
}
</script>
2 Jawaban:
gini?
function setDisplay(index, display) {
var el = document.getElementsByClassName("price")[index];
el.style.display = display;
}
// gunainnya
setDisplay(3, 'block');
setDisplay(1, 'none');
satu tambahan dari ane supaya otomatis kan kalo kata @QaiserLab setDisplaynya masih harus jalanin satu satu nah pake loop
var i;
var length = document.getElementsByClassName("price").length;
//bakal ngejalanin sesuai batasan berapa banyak produk
//untuk mouseenter
for(i= 0; i<length; i++){
setDisplay(i, 'block');
}
//untuk mouseout
for(i= 0; i<length; i++){
setDisplay(i, 'none');
}
nah bisa tuh gan oh iyah sebelumya agan kudu buat dulu event mouseenter sama mouseoutnya mudah mudahan bisa bantu. sebelum kita buat sesuatu berimajinasilah dahulu untuk menghasilkan ide
