Question

我正在接受jQuery中的第一个babysteps并偶然发现了一个我似乎无法解决的问题。

我找不到一篇很好描述我的问题的文章，所以我想尝试以这种方式得到答案。

我不明白为什么我的物体表现得像他们以前的班级一样。当我为类设置悬停操作并通过单击更改对象的类时，jQuery会继续为新类执行动画。

我使用了toggleClass()和removeClass / addClass而没有任何结果：

https://jsfiddle.net/biest9160/f0na6sro/

var wide = function() {
  $(this).animate({ 'width': '120px' }, 200);
}

var normal = function() {
  $(this).animate({ 'width': '100px' }, 200);
}

$(document).ready(function() {
  $('.class1').hover(wide, normal);

  $('.class1').click(function() {
    $(this).toggleClass('class1 class2');
  })
})

div {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  margin: auto;
}
.class2 {
  background: #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="class1">box1</div>
<div id="box1" class="class1">box2</div>
<div id="box1" class="class1">box3</div>
<div id="box1" class="class1">box4</div>

我不明白为什么在对象有一个新类时会触发悬停操作。

Answer 1

最初，您将事件附加到element，并带有class名称。更改class后，事件仍保留在element上。

要删除事件，您可以使用.unbind。要删除.hover 事件，您可以查看this answer。

使用.unbind删除事件并在重新附加后的工作示例将在代码段中显示（基本上是切换悬停事件）：< / p>

＆＃13;

var wide = function(){
    $(this).animate({'width':'120px'},200);
}

var normal = function(){
    $(this).animate({'width' : '100px'},200);
}

$(document).ready(function(){
    $('.class1').hover(wide,normal);
    
    $('.class1').click(function(event){
        var $this = $(this);
        $this.unbind('mouseenter mouseleave'); // remove hover
        if( $this.hasClass('class2'))
        {
            $this.hover(wide, normal); // reattach hover
        }
        $this.toggleClass('class1 class2');
    })
})

＆＃13;

div{
    width:100px;
    height:100px;
    border: 1px solid #000;
    margin: auto;
}

.class2{
    background: #555;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="class1">box1</div>
<div id="box1" class="class1">box2</div>
<div id="box1" class="class1">box3</div>
<div id="box1" class="class1">box4</div>

＆＃13;

新课程保持旧班级行为

1 个答案: