Question

我有一个问题，我真的寻找答案，我问了一些人......但没有解决方案。我有3个'td'元素，它们都属于class =“moreSpace”...所以当我点击一个td元素时......它将它的类更改为“deactivateAssignments”...但是$（“。moreSpace” ）.mouseOver / mouseOut函数仍然对其类更改的元素有影响。为什么？请帮帮我:(

（抱歉这个烂摊子，这是我第一次在这里发布问题）

//DG

$(".moreSpace").mouseover(function(event) {
    var id = event.target.id;
    $('#'+id).css('color','#B5EABC')
});

$(".moreSpace").mouseout(function(event) {
    var id = event.target.id;
    $('#'+id).css('color','#24C635')
});

 function reclass(){
  $('#dg306').attr('class','moreSpace');
  $('#dg632').attr('class','moreSpace');
  $('#dg291').attr('class','moreSpace');
  alert('in');

}

var actId = 2;
$(".moreSpace").click(function(event) {
  reclass();
  var id = event.target.id;
  if (id == 'dg306'){
     actId = 1;
  } else if (id == 'dg632'){
     actId = 2;
  }else if (id == 'dg291'){
     actId = 3;
  }



switch (actId) {
       case 1:
            $('#dg306').toggleClass('moreSpace deactivateAssignments');
            break;
       case 2:
            $('#dg632').toggleClass('moreSpace deactivateAssignments');
            break;
       case 3:
            $('#dg291').toggleClass('moreSpace deactivateAssignments');
            break;

  }

Answer 1

您正在对元素使用直接绑定。所以无论你在这个元素上做什么改变，绑定仍然会存在。

2种解决方案。您可以在鼠标事件中取消绑定off：

$(this).off('mouseover mouseout');

或使用委托：

$(document).on({
    mouseover : function(){},
    mouseout : function(){}
}, '.moreSpace');

Answer 2

不使用$（'＃'+ id）.css（'color'，'＃24C635'）来改变元素的颜色，而是使用CSS：hover属性

.moreSpace{
color:#24C635;
}

.moreSpace:hover{
color:#B5EABC;
}

Answer 3

您可以检查事件处理程序中是否存在该类，如果不是这样，则可以进行简单返回

$(".moreSpace").mouseover(function(event) {
    if(!this.hassClass(".moreSpace") 
       return; 

    var id = event.target.id;
    $('#'+id).css('color','#B5EABC')
});

jQuery - 元素第一类被更改，但查询仍然调用元素第一类。

3 个答案: