Javascript 仅单击div中的目标元素

我已经格式化了一个API响应，以列出某些属性，如下所示。

当用户单击某个列表项上的

delete

链接时，我需要从该项中获取

taskID

，并能够在

completeTask（）中使用它



目前，无论我单击中的
delete
链接到哪个列表项，我都会获得列表中第一个项目的
taskID
。


我应该如何仅针对单击了删除的列表项的
任务ID



API调用：

axios({
            method: 'GET',
            auth: {
                username: APIKey,
                password: ':xxx'
            },
            url: 'https://apiExaple.json',
        })
        .then(function (response) {
            $(response.data['todo-items']).each(function () {
                var taskID = this.id;
                var taskTitle = this.content;
                $(resultElement).append(
                    '<div class="taskDiv">' +
                        '<li style="list-style-type: none">' +
                            '<p>' + taskTitle + '</p >' +
                            '<p id="taskIDListItem">' + taskID + '</p>' +
                            '<p><a href="#" id="deleteBtn">Delete</a>' + '<a href="#" onclick="completeTask()" id="completeBtn"> | Complete | </a></p>' +
                        '</li>' + '<hr>' +
                    '</div>');
                //console.log('Task ID is: ' + taskID);
            });
        })
        .catch(function (error) {
            resultElement.innerHTML = generateErrorHTMLOutput(error);
        });

function completeTask() {
    var task_id = this.$("#taskIDListItem").text();
    console.log(task_id);

    axios({
            method: 'PUT',
            url: 'https://apiExaple.json',
            auth: {
                username: APIKey,
                password: ':xxx'
            },                
        })
        .then(function (response) {
            console.log(response.statusText);    
        })
        .catch(function (error) {
            console.log(error.statusText);
        })

}


用于API响应的HTML

<!-- All Tasks -->
<div class="allTasks">
   <h4 class="h4-well-title">
      <i class="fa fa-fw fa-list"></i> Tasks
      <span>
         <h6 id="todaysDate"></h6>
      </span>
   </h4>
   <hr>
   <div class="panel-body" id="getAllTasksResult">
   </div>
</div>


任务

您可以像这样使用onclick属性



axios({
方法：“GET”，
认证：{
用户名：APIKey，
密码：':xxx'
},
网址：'https://apiExaple.json',
})
.然后（功能（响应）{
$（response.data['todo-items']）。每个（函数（）{
var taskID=this.id；
var taskTitle=this.content；
$（resultElement）.append(
'' +
“
”+
“”+taskTitle+”
”+
“
”+taskID+”
”+
“”+“
”+
“
”+“
”+
'');
//log（'任务ID为：'+任务ID）；
});
})
.catch（函数（错误）{
resultElement.innerHTML=generateErrorHTMLOutput（错误）；
});
函数完成任务（任务id）{
console.log（任务id）；
axios({
方法：'放'，
网址：'https://apiExaple.json',
认证：{
用户名：APIKey，
密码：':xxx'
},                
})
.然后（功能（响应）{
console.log（response.statusText）；
})
.catch（函数（错误）{
console.log（error.statusText）；
})
}
您能在侦听单击事件的部分显示一些HTMLPlus吗。另外，要注意相同ID的多个；您最初的代码片段表明，您可能会得到具有相同ID的多个元素。问题是，HTML中不能有具有相同ID的多个元素。ID必须是唯一的。感谢您指出多个相同ID-这是早期的一个输入错误。不是原因，但是谢谢。谢谢，但是日志返回未定义