Jquery Question posted in
The official Jquery Api Documentation can be found here.

Clicking on jQuery

When I define a code to click and change that element again, I want the element to return to the first state with another click

I wrote another click but it didn’t work
The toggle didn’t work properly either
I want css to appear when clicked and css to be removed when clicked again

$("#green").click(function() {
  var audio = new Audio('sounds/green.mp3');
  audio.play();
  $("#green").css("background-color", "gray");
  $("#green").css("border", "20px solid white");
});

$("#green").click(function() {
  var audio = new Audio('sounds/green.mp3');
  audio.play();
  $("#green").css("background-color", "green");
  $("#green").css("border", "0px");
});
Tags:

2

Answers


  1. 0

    I wrote another click but it didn’t work

    I’d wager that both of the click handlers worked just fine, they simply cancel out the overall result because they both run on every click.

    You only need one click handler, it just needs to conditionally perform one operation vs. another. One way to maintain that condition is to store in some global state which operation was last performed. For example:

    var isClicked = false;
$("#green").click(function() {

  var audio = new Audio('sounds/green.mp3');
  audio.play();

  if (isClicked) {
    $("#green").css("background-color", "green");
    $("#green").css("border", "0px");
  } else {
    $("#green").css("background-color", "gray");
    $("#green").css("border", "20px solid white");
  }

  isClicked = !isClicked;
});

    Each click does three things:

    1. Play the audio
    2. Conditionally change CSS one way or another
    3. Toggle the isClicked so that the next click will choose the other condition
    Login or Signup to reply.
  2. 0

    Just set up the two different styles as classes and one click event that toggles between them. You just need to be careful that the secondary style is written with a selector that is more specific than the default so that it will override when applied.

    $("#green").click(function() {
   //Toggle will work if the classes are set up correctly.
   this.classList.toggle("clicked");
});
    /* Set up a default style  */
#green {
  background-color:gray;
  border:20px solid blue;
}

/* Define secondary style to be toggled on/off */
/* This selector needs to be more specific than the default (ID) selector,
   so it will be a Class.ID selector.  */
#green.clicked {
  background-color:green;
  border: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="green">This is the content area</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search