Question

好吧，我一直在寻找一种方法来做到这一点。

我有一个按钮列表，当它们被点击时应该删除一个表行。我不能直接在HTML文件中写一个onclick，因为用户可以添加或删除其中一些表行，所以我在Javascript中添加了它们：

    function setOnclick() {

        var deleteBtn = document.getElementsByClassName("delete-btn");

        for(var i = 0; i < deleteBtn.length; ++i){
        deleteBtn[i].onclick = deleteArticle(/*(this)*/);
        }
    }

    function deleteArticle(article){
        /* delete the article row from table  */
    }

现在我不能提出任何参数，因为如果我把（）放在函数的末尾，它将启动它而不是仅仅是为了它。

PS：由于这是一项任务，我无权使用jQuery.1

Answer 1

你应该把

...
deleteBtn[i].onclick = deleteArticle
...

function deleteArticle(){
 this.parentNode.removeChild(this);
}

Answer 2

如果要将参数传递给事件侦听器，可以使用.bind()：

＆＃13;

function setOnclick() {
  var deleteBtn = document.getElementsByClassName("delete-btn");
  for(var i = 0; i < deleteBtn.length; ++i){
    deleteBtn[i].onclick = deleteArticle.bind(deleteBtn[i], 'some_more_parameter');;
  }
}

function deleteArticle(param){
  // DOM operation with "this"
  alert(this.innerText + ' & ' + param);
}

setOnclick();

＆＃13;

<button class="delete-btn">
xxx
</button>
<button class="delete-btn">
yyy
</button>

＆＃13;

Answer 3

您可以使用clouser功能。

 function setOnclick() {

    var deleteBtn = document.getElementsByClassName("delete-btn");

    for(var i = 0; i < deleteBtn.length; ++i){
       let article = deleteBtn[i];
       article.onclick = function() {
          deleteArticle(article);
       }

    }
}

function deleteArticle(article){
    /* delete the article row from table  */
}

在Javascript

3 个答案: