javascript - 悬停和点击功能/ Jquery

Question

几个小时前我发布了一个问题，但我的例子并不完美。

就这样吧。

我有两个大箱子。在悬停每个大红色框时，小黑框应该改变它的背景颜色。当你点击每个大框时，小框颜色也应该改变。鼠标进出时它工作正常。但是点击它不起作用。我尝试使用绑定/取消绑定但没有用。

查询：

$('.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 是http://jsfiddle.net/squidraj/kdZ8J/2/

请指教。谢谢。

Answer 1

我会分别检查每个框。因此，我将稍微修改您的 html 代码以及一些 jquery 代码。http://jsfiddle.net/kdZ8J/15/

html代码：

<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>

处理点击事件：

$('#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');
})

第一个矩形悬停代码：

$('.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');
    }
});

第二个矩形 Hoving 代码：

$('.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

您有两行相互冲突的代码：

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

第一行将删除类，第二行将类添加回元素。

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');
});