Question

我有一个函数，每次用户在输入中插入一个值时，都会在<li>内添加一个<ul>元素。相同的函数将创建具有属性{{1}的<li>。

onclick="doneToggle"

doneToggle是一个我想向该元素添加特定类的函数，css类使文本具有“直通”样式。

到目前为止，这是功能

function createListElement() {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.appendChild(document.createTextNode(input.value));
    li.setAttribute("onclick", "doneToggle()")
    li.setAttribute("style", "width: fit-content")
    input.value = "";
}

我希望该函数检索该单击的元素并切换其类，而不必为function doneToggle(element) { element.classList.toggle("done"); }分配ID。预先谢谢你

Answer 1

使用Element.prototype.addEventListener()代替onclick。这样，event将自动传递到处理函数，该函数允许访问引发事件的event.target元素。

代替

li.setAttribute("onclick", "doneToggle()")

做

li.addEventListener('click', doneToggle)

然后使用通过event传递的event.target进行操作，其中function doneToggle(event) { event.target.classList.toggle("done"); }包含被单击的元素：

$('#\\@param_name option:selected')  // get all selected options

Answer 2

在事件侦听器函数中，this是指触发事件的元素，因此，不要使用element（实际上是事件对象），而应使用this：

function doneToggle(event) {
    this.classList.toggle("done");
}

添加一个事件监听器，而不是更改“ onclick”属性：

function createListElement() {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.appendChild(document.createTextNode(input.value));
    li.addEventListener("click", doneToggle)
    li.setAttribute("style", "width: fit-content")
    input.value = "";
}

点击获取<li>元素-Vanilla JS

2 个答案: