javascript - 删除元素上的功能

Question

我试图找到一种方法来删除标签上的功能。我习惯了jquery，代码会是这样的。

$(document).on("click",".goto-messages:not(done)", function(e){...
...$(".profile-messages").addClass("done");

我正在尝试使用 javascript 来实现相同的目标，但我无法添加类属性。我也不确定如何添加参数以不触发函数，例如“：not（done）”

            document.getElementsByTagName("td").onclick = function(){
                this.style.background = blue;
                this.class
            }

如何在 javascript 中实现此结果？我想删除被点击元素的功能。

也是“this.style.background = blue;”这一行 正确的？

Answer 1

你会想要这样的东西（除非你提供一些 HTML），示例使用element.classList并非所有浏览器都支持。但是您可以使用domtokenlist 库之类的东西，它应该可以在所有浏览器中为您提供良好的支持，或者使用简单的跨浏览器 JavaScript可以在添加和删除类中找到一些 RegEx 。至于跨浏览器添加事件，而不是使用addEventListener，你可以看看下面的How to make this Javascript function in IE Browser？或在 SO 上搜索addEvent.

HTML

<table>
    <theader>
        <tr>
            <th>Mesages A</th>
            <th>Mesages B</th>
        </tr>
    </theader>
    <tbody>
        <tr>
            <td class="profile-messages">Message1</td>
            <td class="profile-messages">Message2</td>
        </tr>
        <tr>
            <td class="profile-messages">Message3</td>
            <td class="profile-messages">Message4</td>
        </tr>
        <tr>
            <td class="profile-messages">Message5</td>
            <td class="profile-messages">Message6</td>
        </tr>
    </tbody>
</table>

CSS

.profile-messages {
    background-color: red;
}
.done {
    background-color: blue;
}

Javascript

document.addEventListener("click", function (evt) {
    if (evt.target.tagName.toUpperCase() === "TD" && evt.target.classList.contains("profile-messages")) {
        evt.target.classList.add("done");
    }
}, false);

上jsfiddle

Answer 2

document.getElementsByTagName()返回一个NodeList，你必须迭代它：

var nodes = document.getElementsByTagName("td");
for (var i=0, len = nodes.length; i<len; i++) {
  nodes.item(i).onclick = function () {
    // do something
  };
}

用于document.querySelectorAll()类似 CSS 的选择器：

var nodes = document.querySelectorAll(".goto-messages:not(.done)");