使用addClass或toggleClass與JQuery裏面的點擊方法不起作用？錯誤？

這看起來很簡單..但它仍然無法正常工作。使用addClass或toggleClass與JQuery裏面的點擊方法不起作用？錯誤？

如果你把class。normal放在.hightlight之上，但我不會改變這裏的樣式..只有位置。這沒有任何意義..

我似乎無法粘貼在這裏的HTML代碼，所以我必須這樣做，以塊。並且我附上了所有代碼的快照。

確保你有一個空的HTML頁面。文檔類型無關緊要..我在不同的文檔類型上測試過它，但它仍然無法正常工作。

這是風格BLOK裏面的頭

.highlight { color:black; background-color:yellow; } 
.normal { color:white; background-color: blue; }

在這之後我有最新的jQuery代碼 http://code.jquery.com/jquery-latest.min.js

的來源和在此之後的腳本BLOK在這裏腳本標籤後去：

$(document).ready(function() { 
    $('#maindiv').css('cursor', 'pointer'); 
    $('#maindiv').click(function() { 
    //alert("click"); 
    // $(this).toggleClass("highlight"); //this does not work! 
    // $(this).addClass('highlight'); //this does not work! 

    // $(this).attr("class", "highlight"); //this works 
    // $(this).css("background", "yellow"); this works 

    // the javascript way to do this works also fine. 
    // var element = document.getElementById('maindiv'); 
    // element.setAttribute("class", "highlight"); 
});

}）;

而且體內有「maindiv」和一類「正常」

與文字點擊這裏的idname一個p標籤。

奧凱，我不能等到有人嘗試這種太..它的瘋狂，因爲所有其他方式的工作。但只有.addClass和.toggleClass無法正常工作

因爲我是一個新用戶，我不能附上完整代碼的快照在這裏，但你可以在這裏下載： http://www.bckan.nl/temp/jquerybug.jpg

來源

2012-03-04 chriscross

適合我... http：// jsfiddle。net/mecT9/ – 2012-03-04 18:04:50

也許你有另一個課程覆蓋新課程。使用螢火蟲檢查你的html，看看這個班級是否加入。 – 2012-03-04 18:05:08

嘗試刪除class .normal ...也可能會產生干擾。通常，當您將類分配給元素時，它們會按照它們在CSS定義中出現的順序來獲取屬性。正常情況下，在你的CSS定義中突出顯示後，可能是正常重寫新的高亮類。您可以做的另一件事是添加！對重要類的重要性，例如'。高光{顏色：黑色！重要;背景顏色：黃色！重要; }' – 2012-03-04 18:05:52

正如名稱所示，addClass和toggleClass只是添加類，這意味着您的元素仍然是.normal，它可能比.highlight具有更高的優先級，因此，您的顏色更改不適用。檢查DOM，你會看到該類被添加。嘗試使用.highlight替換.normal，而不是在CSS中添加.highlight或將.normal放在.highlight上。您也可以添加！對.highlight的屬性很重要，但不建議這樣做。

來源

2012-03-04 18:07:01

感謝您的完美，現在變得非常有意義:) – chriscross 2012-03-06 13:13:23

嘗試：

$(document).ready(function() { 
    $('#maindiv').css('cursor', 'pointer'); 
    $('#maindiv').on('click', function() { 
     $(this).toggleClass("highlight").toggleClass('normal'); 
    }); 
});

沒試過你的代碼，但我假設它添加了類細，但因爲你永遠不刪除「正常」類的CSS不會被覆蓋。

也爲優化着想，儘量保持的.css最低在你的JavaScript。將maindivs光標設置爲指針可以很容易地在.css文件中設置。並避免.click/.live/.bind等，他們已被棄用，所有這些鏈接到新的.on函數。所以只需直接使用.on。

哦，加入！項重要的在你的CSS將工作，而這也是你應該儘量避免儘可能多的，只會讓你更難以後。

來源

2012-03-04 18:10:07 ninja

在這裏使用忍者的代碼是一個小提琴並且工作正常。 http://jsfiddle.net/cWQrH/ – 2012-03-04 18:18:26

太棒了！感謝您的測試並感謝您的建議！我希望我能給你們一些觀點，但我是新人，所以沒有這個功能。 – chriscross 2012-03-06 13:11:34

使用addClass或toggleClass與JQuery裏面的點擊方法不起作用？錯誤？

回答

相關問題