0

数時間前に質問を投稿しましたが、私の例は完全には理解できませんでした。

それで、ここに行きます。

大きな箱が二つあります。大きな赤いボックスのそれぞれにカーソルを合わせると、小さな黒いボックスの背景色が変わります。大きなボックスをクリックすると、小さなボックスの色も変わります。しかし、onclickでは機能しません。バインド/アンバインドを試みましたが、うまくいきませんでした。

Jクエリ:

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

ご意見をお聞かせください。ありがとう。

4

2 に答える 2

0

各ボックスを個別にチェックします。そこで、いくつかの jquery コードとともに、HTML コードを少し変更します。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');
    }
});

2 番目の Rectangular 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');
   }
});
于 2013-10-28T23:27:34.047 に答える