Question

所以我想创建一个简单的待办事项列表，其中我为每个列表项创建了复选框。每次我更改与某个任务相关联的复选框时，我都想调用一个具有if else语句的函数。 if else语句将告诉我是否选中了复选框，并根据该逻辑执行代码。问题是，我不知道如何访问我所指的特定复选框，因为每个任务都是通过javascript创建的，并且没有唯一的ID。

所以说我的问题是：

如何参考我正在更改的特定复选框？使用“this”关键字？如果是这样，在这种特殊情况下，“这个”究竟指的是什么？

这是我的js代码：

$("#add").button();
$("#remove").button();

  //Constructor for ToDo Object
  function ToDo(name){
    this.name = name;
  }

  ToDo.prototype.addItem = function(string){

    var list = document.querySelector("#list");
    var listItem = document.createElement("div");
    var listItemPar = document.createElement("p");
    var listItemText = document.createTextNode(string);
    var checkBox = document.createElement("input")
    checkBox.setAttribute('type','checkbox');
    checkBox.className = "checkBoxes"
    checkBox.setAttribute("onchange","checkedBoxes()")
    var removeButton = document.createElement("button")
    removeButton.className = "removeButtons"
    list.appendChild(listItem);
    listItem.appendChild(listItemPar);
    listItemPar.appendChild(listItemText);
    listItem.appendChild(checkBox);
    listItem.appendChild(removeButton);
    $("button.removeButtons").button();
    $(".removeButtons").hide();
    document.querySelector("#input").value = "";
  };

  ToDo.prototype.removeItem = function(){
    console.log("remove item");
  }


document.querySelector("#remove").addEventListener("click",function(){
  item = new ToDo();
  item.removeItem();
  window.alert("hi");
})

document.querySelector("#add").addEventListener("click",function(){
  var item = new ToDo();
  item.addItem(document.querySelector("input").value);
})


function checkedBoxes(){
  //function I am referring to
}

所以在代码中，我指的是checkBox.setAttribute（“onchange”，“checkedBoxes（）”），函数位于底部。 HTML实际上并不是非常重要，因为我通过javascript创建几乎所有内容，但是如果你需要查看它以帮助告诉我。

提前致谢

Answer 1

要回答您的问题，您必须在this

传递checkBox.setAttribute("onchange", "checkedBoxes(this)")关键字

this指的是当前元素。

Here is a working example

<强>的script.js

$(document).ready(function() {

    //Constructor for ToDo Object
    function ToDo(name) {
        this.name = name || "";
    }

    ToDo.prototype.addItem = function(string) {
        var list = document.querySelector("#list");
        var listItem = document.createElement("li");
        var listItemPar = document.createElement("p");
        var listItemText = document.createTextNode(string);
        var checkBox = document.createElement("input")
        checkBox.setAttribute('type', 'checkbox');
        checkBox.className = "checkBoxes"
        checkBox.setAttribute("onchange", "checkedBoxes(this)")
        var removeButton = document.createElement("button")
        removeButton.setAttribute('type', 'button');
        removeButton.className = "removeButtons"
        list.appendChild(listItem);
        listItem.appendChild(listItemPar);
        listItemPar.appendChild(listItemText);
        listItem.appendChild(checkBox);
        listItem.appendChild(removeButton);
        $(".removeButtons").hide();
        document.querySelector("input").value = "";
    };

    ToDo.prototype.removeItem = function() {
        console.log("remove item");
    }
    $("#remove").click(function(e) {
        var item = new ToDo();
        item.removeItem();
        window.alert("hi");
    });

    $("#adder").click(function(e) {
        console.log("add clicked");
        var item = new ToDo("dd");
        item.addItem(document.querySelector("input").value);
    });

    $("#list").css("border", "3px solid red");


});

function checkedBoxes(thisCheckbox) {
    //function I am referring to
    console.log(thisCheckbox);
}

<强> HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@*" />
    <script src="script.js"></script>
  </head>

  <body class="container">
    <input type="text" name="userinput" />
    <button type="button" id="adder">Add</button>
    <button type="button" id="remove">Remove</button>
    <hr />
    <ul id="list" data-hello="world"></ul>
  </body>

</html>

onchange属性：从中调用函数时的上下文究竟是什么？

1 个答案: