Question

我几个小时前发了一个问题，但我的例子不太理解。

所以就这样了。

我有两个大盒子。在悬停每个大红色框时，小黑框应该改变它的bg颜色。当你点击每个大框时，小框颜色也应该改变。鼠标进出时它工作正常。但是onclick它没有用。我尝试使用bind / unbind，但没有用。

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

第一个Rectugular Hovering代码：

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

在悬停和单击功能/ Jquery上

2 个答案: