jQuery，removeClass 的问题答案

【问题标题】：jQuery, issue with removeClassjQuery，removeClass 的问题
【发布时间】：2013-09-14 00:11:24
【问题描述】：

我有css：

.frame{
    height:200px;
    width:200px;
    border-style:solid;
    border-width:3px;
}

.test2{
    opacity:0;
}

我有 html

<div class="frame">
<span class="test test2">qwerty</span>
</div>

当鼠标在 .frame 上时，我想将 .test2 类删除到 .test，当鼠标在 leave.frame 上时，我想将 .test2 添加到 .test。所以我的jQuery代码是：

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
    var $el=$(this),
    mEnt  = e.type == "mouseenter";
    if(mEnt == true){
        el.find('.test').removeClass('test2');
    }else{
        el.find('.test').addClass('test2');
    }
});

但它不起作用，.test2 不想从 .test 中删除。这是一个jsfiddle：http://jsfiddle.net/malamine_kebe/EmE7p/

【问题讨论】：

只需检查控制台就可以节省您提出这个问题的时间

标签： jquery opacity removeclass mouseenter

【解决方案1】：

您在el 中忘记了$，应该是$el

$(document).on('mouseenter mouseleave', '.frame', function (e) {
    var $el = $(this),
        mEnt = e.type == "mouseenter";
    if (mEnt == true) {
        $el.find('.test').removeClass('test2');
    } else {
        $el.find('.test').addClass('test2');
    }
});

演示here

最好的解决方案是简单的 CSS（不需要 jQuery），像这样：

.test {
    opacity:0;
}
.frame:hover .test {
    opacity:1;
}

演示here

【讨论】：

【解决方案2】：

首先：除非您需要支持 IE7 及更早版本，否则您确实应该在 CSS 中使用 :hover：

.frame{
    height:200px;
    width:200px;
    border-style:solid;
    border-width:3px;
}

.frame .test {
    opacity: 0;
}

.frame:hover .test {
    opacity: 1;
}

但是如果你想用 JavaScript 来做，代码的问题是你在一个地方使用$el作为元素，而在其他地方使用el。你需要保持一致。您应该在 JavaScript 控制台中看到错误。您也不需要mEnt 变量，也不需要在测试条件时使用== true。

所以：

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
    var $el=$(this);
    if(e.type == "mouseenter"){
        $el.find('.test').removeClass('test2');
    }else{
        $el.find('.test').addClass('test2');
    }
});

【讨论】：

【解决方案3】：

变量是$el，但removeClass 方法正在el 上调用。

$(document).on('mouseenter mouseleave', '.frame', function( e ) {
    var $el=$(this),
    mEnt  = e.type == "mouseenter";
    if(mEnt == true){
        $el.find('.test').removeClass('test2');
    }else{
        $el.find('.test').addClass('test2');
    }
});

JS 小提琴： http://jsfiddle.net/EmE7p/3/

【讨论】：

【解决方案4】：

使用这个：

$(".frame").hover(
  function () {
    //here mouse enter
  },
  function () {
    //here mouse leave
  }
);

【讨论】：