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

将参数发送为：

if(file.toString().matches("somet.*ext\\.txt")){
        System.out.println(file.toAbsolutePath());
    }
    else{
        System.out.println("Not matching");
    }

然后在函数中：

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将是DOMElement，但this，hasClass和addClass仅适用于jQuery对象。

Answer 2

您的代码不起作用，因为函数中的e是DOM元素，而不是jQuery对象。 DOM元素没有jQuery函数。

我应该注意，它是DOM元素的唯一原因是，通过为元素提供id，您已经导致浏览器创建自动全局对于它，这就是为什么onClick="done(test)"可以工作的原因（test有一个变量引用，并且会选择自动全局）。

minimal 修复程序是使其成为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属性，尤其是因为依赖自动全局变量容易出错（例如，{{1}会失败）：

＆＃13;

id="name"

＆＃13;

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

＆＃13;

.Gset {
  background: yellow;
}

＆＃13;

Answer 3

如果你避免使用inline-event onClick。

会更好

HTML：

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

JS：

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

希望这有帮助。

在另一个元素的点击事件中更改元素的类

3 个答案: