Question

当我单击它时，我试图获取生成的按钮ID，以选择和操作自己的父div。

$(this).attr("id")和this.id返回undefined或k.fn.init。

我想念什么？

JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// functions

    let taskCounter = 0;

    let addOne = () => {
        let userStr = document.getElementById("userText").value;
        let nextItem = taskCounter;
        $("#toDoList ul").append('<div class="item-'+nextItem+'"><li>'+userStr+'</li><input id="btn-'+nextItem+'" type="button" value="Complete Task" onclick="taskDone()"></div>');
        taskCounter = taskCounter + 1
    }

    let taskDone = () => {
        let selectTest = $(this).attr("id");
        console.log(selectTest);
        return selectTest;

    }
</script>

HTML：

<html>
    <body>
        <input id="userText" type="text" placeholder="Enter Task Here">
        <input id="addToList" type="button" value="Add Task" onclick="addOne()">
        <h2>To Do</h2>
        <div id="toDoList">
            <ul>
            </ul>
        </div>
        <h2>Done</h2>
        <div id="DoneList">
            <ul>
            </ul>
        </div>
    </body>
</html>

Answer 1

您可以在params中传递元素：

// functions

let taskCounter = 0;

let addOne = () => {
  let userStr = document.getElementById("userText").value;
  let nextItem = taskCounter;
  $("#toDoList ul").append('<div class="item-' + nextItem + '"><li>' + userStr + '</li><input id="btn-' + nextItem + '" type="button" value="Complete Task" onclick="taskDone(this)"></div>');
  taskCounter = taskCounter + 1
}

function taskDone(el) {
  let selectTest = el.getAttribute("id")
  console.log(selectTest);
  //return selectTest;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <input id="userText" type="text" placeholder="Enter Task Here">
  <input id="addToList" type="button" value="Add Task" onclick="addOne()">
  <h2>To Do</h2>
  <div id="toDoList">
    <ul>
    </ul>
  </div>
  <h2>Done</h2>
  <div id="DoneList">
    <ul>
    </ul>
  </div>
</body>

</html>

Answer 2

使用常规函数定义而不是箭头函数。箭头函数更改this的上下文。因此，使用let taskDone = () => {...}并尝试访问this时，它不是指您单击的元素。相反，请尝试let taskDone = function () {...}。

Answer 3

不要使用HTML属性将事件处理程序附加到HTML元素。相反，请使用jQuery自己的事件附加机制on。另外，不要通过将信息编码为ID来掩埋信息；只需使用data-属性即可。

// functions

let taskCounter = 0;

let addOne = () => {
  let userStr = document.getElementById("userText").value;
  let nextItem = taskCounter;
  $("#toDoList ul").append('<div class="item-' + nextItem + '"><li>' + userStr + '</li><input id="btn-' + nextItem + '" type="button" value="Complete Task" data-index="' + nextItem + '" class="done"></div>');
  taskCounter = taskCounter + 1
}

function taskDone() {
  let selectTest = this.getAttribute("data-index");
  console.log(selectTest);
  //return selectTest;
}

$("#addToList").on("click", addOne);
$(document).on("click", ".done", taskDone);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <input id="userText" type="text" placeholder="Enter Task Here">
  <input id="addToList" type="button" value="Add Task">
  <h2>To Do</h2>
  <div id="toDoList">
    <ul>
    </ul>
  </div>
  <h2>Done</h2>
  <div id="DoneList">
    <ul>
    </ul>
  </div>
</body>

</html>

使用JQuery获取单击的按钮ID

3 个答案: