"это" принадлежит его владельцу - - PullRequest
Новая
       1

"это" принадлежит его владельцу -

0 голосов
/ 03 октября 2019

Ну, когда дело доходит до 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", если это возможно? или как заменить "это" собственной ссылкой?

1- в delBtn // (прослушиватель событий) это относится к кнопке удаления, я полагаю?

2- toggle? // (сделано) является классом css: line-through // это относится к тексту узла внутри

здесь есть ссылка для этого кода (это пример списка покупок)

1 Ответ

0 голосов
/ 03 октября 2019

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');
          })
      }
  }
...