悬停和单击功能/ jQuery

Question

I posted a question few hours back but my example was not perfect to understand.

So here it goes.

I have two big boxes. On hover each of the big red box, the small black box should change it's bg color.When you click on each big box then the small box color should change as well.On mouse enter and out it's working fine. But onclick it's not working. I tried with bind/unbind but didn't work.

Jquery:

$('.libg').click(function () {
    $('.imagebg').removeClass('active');
    $(this).find('.imagebg').addClass('active');
}).hover(
function () {
    $(this).find('.imagebg').addClass('active');
},
function () {
    $(this).find('.imagebg').removeClass('active');
});

Jsfiddle is http://jsfiddle.net/squidraj/kdZ8J/2/

Please advice. Thanks.

Answer 1

I would check each box separately. So I'm going to modify your html code a bit along with some jquery code. http://jsfiddle.net/kdZ8J/15/

Html code:

<ul>
  <li class="libg1" id="1">
    <div class="imagebg1" id="1a"></div>
  </li>
  <li class="libg2" id="2">
    <div class="imagebg2" id="2a"></div>
  </li>
</ul>

Handle click events:

$('#1').click(function () {
   //add the click and set active class
   $(this).data('clicked', true);
   $('#1a').addClass('active');
   //remove the click and active class
   $('#2').data('clicked', false);
   $('#2a').removeClass('active');
})
$('#2').click(function () {
   //add the click and set active class
   $(this).data('clicked', true);
   $('#2a').addClass('active');
   //remove the click and active class
   $('#1').data('clicked', false);
   $('#1a').removeClass('active');
})

First Rectugular Hovering code:

$('.libg1').hover(function () {
  if($(this).data('clicked')) {
    //check if active class exists
    if($('.active').size()){
      $('#1a').removeClass('active');
    }
    else{
      $('#1a').addClass('active');
    }
  }
  else{
    $('#1a').addClass('active');
  }
},function () {
    if($(this).data('clicked')) {
      $('#1a').addClass('active');
    }
    else{
      $('#1a').removeClass('active');
    }
});

Second Rectangular Hoving code:

$('.libg2').hover(function () {
   if($(this).data('clicked')) {
     //check if active class exists
     if($('.active').size()){
       $('#2a').removeClass('active');
     }
     else{
       $('#2a').addClass('active');
     }
   }
   else{
     $('#2a').addClass('active');
   }
},function () {
   if($(this).data('clicked')) {
     $('#2a').addClass('active');
   }
   else{
     $('#2a').removeClass('active');
   }
});

Answer 2

You have two conflicting lines of code:

$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');

The first line will remove the class, and the second will add the class right back to the element.

http://jsfiddle.net/kdZ8J/4/

$('.libg').click(function () {
    var current = $(this).find('.imagebg');
    var all = $('.imagebg');
    var index = all.index(current);

    $('.imagebg').each(function(i) {
        if(i != index) {
            $(all[i]).removeClass('active');
        }
    });

    if(current.hasClass('active')) {
        current.removeClass('active');
    } else {
        current.addClass('active');
    }
}).hover(
function () {
    $(this).find('.imagebg').addClass('active');
},
function () {
    $(this).find('.imagebg').removeClass('active');
});