Question

我已将API响应格式化为列出某些属性，如下所示。

当用户点击某个列表项的delete链接时，我需要从该项中获取taskID并能够在completeTask()中使用它。
/> 目前，无论我在哪个列表项中单击delete链接 - 我总是得到列表中第一个的taskID。

我应该如何定位{strong}仅 taskID点击delete的列表项？

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

使用获取的taskID的函数：

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>

Answer 1

您可以使用像这样的onclick属性

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
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'+ taskID +'">Delete</a>' + '<a href="#" onclick="completeTask('+ taskID +')" id="completeBtn"> | Complete | </a></p>' +
                        '</li>' + '<hr>' +
                    '</div>');
                //console.log('Task ID is: ' + taskID);
            });
        })
        .catch(function (error) {
            resultElement.innerHTML = generateErrorHTMLOutput(error);
        });
        
        
function completeTask(task_id) {
    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);
        })

}

加上你不能多次使用相同的id你可以将它与taskID连接，就像我在deleteBtn中所做的那样

仅在单击的div中的目标元素

1 个答案: