aa
unknown
html
2 years ago
3.9 kB
3
Indexable
Never
<html> <head> <title>JQuery</title> <style> #kotak{ width:50px; height:50px; border: 1px solid black; margin:10px; } .groupKotak{ width:50px; height:50px; border: 1px solid black; margin:10px; display:inline-block; } .warna{ background-color:red; } .warnahijau{ background-color: green; } </style> </head> <body> <h1 id="judul"></h1> <div id="kotak"></div> <input type="button" value="fade out" id ="buttonFadeOut"> <input type="button" value="fade in" id ="buttonFadeIn"> <input type="button" value="Fade Toggle" id="buttonFadeToggle"> <input type="button" value="Reset Color" id="buttonReset"> <br> <div class="groupKotak ">1</div> <div class="groupKotak">2</div> <div class="groupKotak">3</div> <div class="groupKotak">4</div> <div class="groupKotak">5</div> <script src="10680_library JQuery - jQuery v3.6.1.js"></script> <script> $(document).ready(function(){ //variable let h1Judul = $("#judul"); let divKotak = $("#kotak"); let buttonFadeOut = $("#buttonFadeOut"); let buttonFadeIn = $("#buttonFadeIn"); let buttonFadeToggle = $("#buttonFadeToggle"); let groupKotak = $(".groupKotak"); $(".groupKotak:eq(1)").addClass("warnahijau"); $(".groupKotak:eq(3)").addClass("warnahijau"); //function function changeBox(){ h1Judul.text(h1Judul.text()+"a"); } function changeColor(){ } //event listener divKotak.click(function(){ changeBox(); if(divKotak.hasClass("warna")){ divKotak.removeClass("warna"); } else{ divKotak.addClass("warna") } // if(divKotak.css("background-color") == "red"){ // divKotak.css("background-color",""); // } // else{ // divKotak.css("background-color","red"); // } }); buttonFadeOut.click(function(){ divKotak.fadeOut(); }) buttonFadeIn.click(function(){ divKotak.fadeIn(); }) buttonFadeToggle.click(function(){ divKotak.fadeToggle(); }) groupKotak.click(function(){ if($(this).hasClass("warna")){ $(this).removeClass("warna"); var currentIndex = $(groupKotak).index(this); if(currentIndex == 1 || currentIndex == 3 ){ $(this).addClass("warnahijau"); } } else{ $(this).removeClass("warnahijau").addClass("warna"); } }) $("#buttonReset").click(function(){ groupKotak.removeClass("warna"); }) }); </script> </body> </html>