$(document).ready(function(){ $("#button").click(function(){ var statusClass = $(this).attr("class"); var statusData = $("#image").attr("data-id"); if(statusClass == 'off'){ $(this).attr("class", "on"); $(".status").html("ON"); if(statusData == 0){ console.log("100 %"); $(".lighttext").html("Geschafft! Die Lichtstärke beträgt nun 100% - jetzt erneut aus- und einschalten."); $("#image").attr("data-id", "1"); $(".light").attr("src", "/images/gallery/4-StepDim/100.jpg"); } else if(statusData == 1){ console.log("50 %"); $(".lighttext").html("Toll, jetzt beträgt die Lichtstärke nur noch 50% - erneut schalten, um weiter zu dimmen."); $("#image").attr("data-id", "2"); $(".light").attr("src", "/images/gallery/4-StepDim/50.jpg"); } else if(statusData == 2){ console.log("20%"); $(".lighttext").html("Gemütlich! Das Candellight Dinner kann beginnen - Lichtstärke nur noch bei 20%."); $("#image").attr("data-id", "0"); $(".light").attr("src", "/images/gallery/4-StepDim/20.jpg"); } } else{ $(this).attr("class", "off"); $(".status").html("OFF"); $(".lighttext").html("Das Licht ist aus, schalten Sie es erneut an, um den Effekt zu sehen."); $(".light").attr("src", "/images/gallery/4-StepDim/0.jpg"); } }); });