Question

好吧，当涉及到this时，则表示该所有者在函数中，它指的是窗口在HTML事件处理程序中，这是指接收事件的HTML元素：例如：

    <button onclick="this.style.display='none'">Click to Remove Me!</button>
    // That's mean instead of this I can write 
    <button onclick="document.querySelector('button').style.display='none'">Click to Remove Me!</button>
    //so with this I specifed this button exactly

看看这段代码，我试图猜测this指的是什么？：

var btn = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.getElementsByTagName('li')

//event for BUTTON
btn.addEventListener("click", function () {
    if (input.value.length > 0) {
        //create list element and append it in <ul>
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(input.value));
        ul.appendChild(li);
        input.value  ="";

        //create delete button and append it in <li>
        var delBtn = document.createElement('button')
        delBtn.appendChild(document.createTextNode("X"))
        delBtn.className = "colorButton"
        li.appendChild(delBtn);

        //apply toggle function(must be out )

        toggle();

        //event listener for the delete button after been created to delete all the node
        delBtn.addEventListener("click", function () {
            this.parentNode.remove();//this refer to the Element receive the event=delBtn
        })
    }
})

//-----toggle function---//
function toggle() {
    for (i = 0; i < li.length; i++) {
        li[i].addEventListener('click', changeClass)
    }
}

function changeClass() {
    this.classList.toggle('done');
}

那么，如果可能的话，我该怎么写而不是“ this”呢？或如何用自己的参考替换“ this”？

1-在delBtn ///（事件监听器），我指的是删除按钮？

2- toggle？//（done）是一个CSS类：line-through //

内的节点文本

这是此代码的link（这是购物清单的示例）

Answer 1

this是指当前元素li[i]，不是100％肯定的，但是您可以将this替换为li[i]，也可以移动更改类函数直接插入到回调中，因此可能更容易理解此引用

  function toggle(){
      for( i=0; i<li.length; i++){
          li[i].addEventListener('click', function changeClass(){
              this.classList.toggle('done');
          })
      }
  }

“此”属于它的所有者-

1 个答案: