Cannot change variable using click event with jQuery

Question

I am trying to change global variable finish from false to true using click event in order to prevent hovering the circles. After I use click event, my global variable finish did not change (it is still false) and I can still do hovering over some circles. Why is that happening?

var finish = false;

$( ".rating-circle" ).click( function() {
    $( this ).addClass( "rating-chosen" );
    $( this ).prevAll().addClass( "rating-chosen" );
    finish = true;
});

if ( finish == false )
{
    $( ".rating-circle" ).hover( 
    	function() {
      $( this ).addClass( "rating-hover" );
      $( this ).prevAll().addClass( "rating-hover" );
    }, 
      function() {
      $( this ).removeClass( "rating-hover" )
      $( this ).prevAll().removeClass( "rating-hover" );
    } );
}

body {
  font-family: Verdana;
}
h1, h2, h3 {
  color: darkblue;
}
.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Finding elements using jQuery</h2>
<h3>Rate this session</h3>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

Patrick Kunka · Accepted Answer · 2017-09-15 11:08:03Z

1

The problem is that your checking logic takes place above your hover event binding, so it is only evaluated once when the code is first run. You need to check the finish flag within the handler function itself, or you could just unbind the handlers on click.

$( ".rating-circle" ).hover(function() {
  if (finish) return;

  $( this ).addClass( "rating-hover" );
  $( this ).prevAll().addClass( "rating-hover" );
}, function() {
  $( this ).removeClass( "rating-hover" )
  $( this ).prevAll().removeClass( "rating-hover" );
} );

Also, it would be more idiomatic/semantic to name your flag something like finished or hasFinished.

answered Sep 15, 2017 at 11:08

Patrick Kunka

1,0588 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2017-09-15 11:08:13Z

Your global variable does change, but it's too little too late, by that time the event handlers are already bound, and the condition doesn't matter.

As you're adding a unique class anyway on click, you could just check for that class inside the hover events

$(".rating-circle").click(function() {
  $(this).addClass("rating-chosen");
  $(this).prevAll().addClass("rating-chosen");
});

$(".rating-circle").hover(
  function() {
    if ($(".rating-circle.rating-chosen").length === 0) {
      $(this).addClass("rating-hover");
      $(this).prevAll().addClass("rating-hover");
    }
  },
  function() {
    if ($(".rating-circle.rating-chosen").length === 0) {
      $(this).removeClass("rating-hover")
      $(this).prevAll().removeClass("rating-hover");
    }
  });

body {
  font-family: Verdana;
}

h1,
h2,
h3 {
  color: darkblue;
}

.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Finding elements using jQuery</h2>
<h3>Rate this session</h3>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

Shiladitya · Accepted Answer · 2017-09-15 11:09:09Z

var finish = false;

$( ".rating-circle" ).click( function() {
    $( this ).addClass( "rating-chosen" );
    $( this ).prevAll().addClass( "rating-chosen" );
    finish = true;
});

$( ".rating-circle" ).hover( function() {
  if ( finish == false ){
    $( this ).addClass( "rating-hover" );
    $( this ).prevAll().addClass( "rating-hover" );
  }
},function(){
  if ( finish == false ){
    $( this ).removeClass( "rating-hover" )
    $( this ).prevAll().removeClass( "rating-hover" );
  }
});

body {
  font-family: Verdana;
}
h1, h2, h3 {
  color: darkblue;
}
.rating-circle {
  height: 2em;
  width: 2em;
  border: .1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: .1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Finding elements using jQuery</h2>
<h3>Rate this session</h3>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

Collectives™ on Stack Overflow

Cannot change variable using click event with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related