点击后将课程添加到div

Question

我试图在单击时将一个类添加到div元素中。我无法让它工作，我的设置类似于：

的javascript：

function choose() {
    this.addClass("selected");
}

HTML：

<div class="initialclass" onclick="choose()">CLICK</div>

我在该函数中有其他正常工作的javascript命令，我只是无法添加类。

Answer 1

您当前的代码有两个问题。首先，JS函数中的this引用window，而不是单击的元素。第二，如果它确实引用了那个元素，它将是一个DOMElement，而不是一个jQuery对象，所以它不会有addClass()方法 - 你需要将它转换为一个jQuery对象。试试这个：

<div class="initialclass" onclick="choose(this)">CLICK</div>

function choose(el) {
    $(el).addClass("selected");
}

但请注意，最好使用JavaScript连接事件。当您使用jQuery时，您可以这样做：

<div class="initialclass">CLICK</div>

$(function() {
    $('.initialclass').click(function() {
        $(this).addClass("selected");
    });
});

Answer 2

像这样更改你的HTML： -

<div class="initialclass" onclick="choose(this)">CLICK</div>

和功能： -

function choose(dv) {
   $(dv).addClass("selected");
 }

Answer 3

使用classList：

  

classList返回元素的class属性的标记列表。

el.classList.add("selected");

classList.add：

  

将一个类添加到元素的类列表中。如果类已存在于元素的类列表中，则不会再次添加该类。

<强> CODE

HTML：

<div class="initialclass" onclick="choose(this)">CLICK</div>

使用Javascript：

function choose(el) {
    el.classList.add("selected");
}

DEMO

Answer 4

如果您使用jquery，则添加此代码是$(document).ready()

中的代码

$(".initialclass").click(function(){
   $(this).addClass("selected");

});