在另一個元素的單擊事件中更改元素的類

Question

我有以下代碼，但它不起作用。我試圖添加或刪除一個基於點擊事件的類。

的Javascript：

function done(e){ 
    if (e.hasClass("Gset")) { 
     e.removeClass("Gset") 
    } 
    else { 
     e.addClass("Gset") 
    } 
} 

HTML：

<h4 id="test"> 
    <input type="checkbox" onClick="done(test)"> 
    Ready? 
</h4> 

Here is a Jfiddle link showing it

任何幫助將不勝感激！

Answer 1

您的代碼不起作用，因爲您的函數中的e是一個DOM元素，而不是一個jQuery對象。 DOM元素沒有jQuery功能。

我要指出的是，這是一個DOM元素的唯一原因是，通過給予元素的id，你已經引起了瀏覽器爲它創建一個自動全球，這就是爲什麼onClick="done(test)"在所有工作（在test有一個變量引用，並且會自動獲取全局）。

的最小的解決辦法是讓一個jQuery對象：

function done(e){ 
e = $(e);           // <=== 
if (e.hasClass("Gset")){e.removeClass("Gset") } 
else {e.addClass("Gset") } 
} 

但更徹底的解決辦法是使用toggleClass還有：

function done(e) { 
    $(e).toggleClass("Gset"); 
} 

而更徹底的更新將是使用jQuery來連接處理程序，而不是使用長期過時的onxyz屬性，這不僅僅是因爲依賴於自動全局變量容易出錯（例如，id="name"會失敗）：

$("#test input").on("click", function() { 
 
    $("#test").toggleClass("Gset"); 
 
});

.Gset { 
 
    background: yellow; 
 
}

<h4 id="test"> 
 
    <input type="checkbox"> 
 
    Ready? 
 
</h4> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

發送參數爲：

done(this) 

然後在功能：

function done(e) { 
    e = $(e).parent(); 
    if (e.hasClass("Gset")) { 
    e.removeClass("Gset") 
    } else { 
    e.addClass("Gset") 
    } 
} 

有一個簡單的方法：

function done(e) { 
    $(e).parent().toggleClass("Gset"); 
} 

原因：

• e，因爲作爲this傳遞將是一個DOMElement，但hasClass，addClass和removeClass只對jQuery的對象工作。

Answer 3

這將是更好，如果你避免inline-event的onClick。

HTML：

<h4 id="test"> 
    <input type="checkbox">Ready? 
</h4> 

JS：

$('#test input').click(function(){ 
    $('#test').toggleClass("Gset"); 
}) 

希望這有助於。