關於懸停和點擊功能/ jquery

Question

我幾個小時後發佈了一個問題，但我的例子並不完美。

所以就這樣了。

我有兩個大箱子。在懸停每個大紅色的盒子時，小黑盒子應該改變它的bg顏色。當你點擊每個大盒子時，小盒子的顏色也應該改變。鼠標進出它的工作正常。但點擊它不起作用。我嘗試綁定/解除綁定，但沒有奏效。

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

手柄click事件：

$('#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懸停代碼：

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

第二條形霍芬代碼：

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