addClass（）在mouseenter（）中不起作用？

-1

我有一個mouseenter功能，將選定的div變成紅色和1不透明度。我有一個類「完整」，只是這樣做，但是當我在mouseenter中添加該類時，div不會更改顏色。相反，如果我添加紅色並使用this.style.color和this.style.opacity更改mouseenter內部的不透明度，那麼它似乎工作。我的問題是爲什麼？addClass（）在mouseenter（）中不起作用？

的jQuery（不工作）：

$('.content').mouseenter(function() { 

    $(".content").each(function (i) { 
     if (this.style.color != "#F7F7F7") { 
      this.style.color = "#F7F7F7"; 
      this.style.opacity = "0.5"; 
     } 
    }); 

    this.addClass('full'); 

});

的jQuery（WORKING）：

$('.content').mouseenter(function() { 

    $(".content").each(function (i) { 
     if (this.style.color != "#F7F7F7") { 
      this.style.color = "#F7F7F7"; 
      this.style.opacity = "0.5"; 
     } 
    }); 

    this.style.color = "red"; 
    this.style.opacity = "1"; 

});

CSS：

.full 
{ 
color: red; 
opacity: 1; 
}

來源

2013-07-16 user2441391

this是不是在一個jQuery集合callba ck到mouseenter方法。您需要使用$(this)。

來源

2013-07-16 16:17:31

是的，你說得對。你能解釋'this'和'$（this）'之間的區別嗎？ – user2441391

'this'是指DOM元素，'$（this）'是封裝在jquery對象中的DOM元素，並向其中添加了jquery方法。 'addClass（）'是一個jquery的方法，這就是爲什麼你需要使用jquery對象。 –

這個指的是（在這個例子中）一個DOM節點。 '$（this）'返回一個基於'this'引用的節點的JQuery對象。 jquery對象具有$ function可以訪問的所有方法。一個正常的dom節點不會。 –

this應該像jQuery(this)一樣使用。

用途：

$('.content').mouseenter(function() { 

    $(".content").each(function (i) { 
    if (this.style.color != "#F7F7F7") { 
     this.style.color = "#F7F7F7"; 
     this.style.opacity = "0.5"; 
    } 
    }); 

    jQuery(this).addClass('full'); 

});

來源

2013-07-16 16:18:46

有一對夫婦的問題;一個是this不是處理程序中的jQuery對象。另一個是你的style規則將總是優先於一個類*。我真的不知道上下文是什麼，但好像你默認情況下應使他們所有的顏色，添加和刪除類：

var $content = $('.content'); 

$content.mouseenter(function() { 
    $content.removeClass('full'); 
    $(this).addClass('full'); 
});

雖然是使它看起來像你的CSS應該少於.full和更多:hover，根本沒有JavaScript。（這是最好的一種JavaScript。）

^{*沒有!important，你永遠不要使用它。}

來源

2013-07-16 16:19:25 Ryan

您正在用javascript設置嵌入式樣式。這些將始終推翻班級風格。

來源

2013-07-16 17:00:50 MiRaIT

addClass（）在mouseenter（）中不起作用？

回答

相關問題