Question

我当前单击一个按钮以显示一些信息，但是该信息仅显示在第一项按钮的下方。我希望它显示在我的项目索引中每个相应按钮的下方。

赞赏有关调试的所有提示。

请参见下面的JS代码：

$(function(){
  homeButton();
  profileButton();
  readMoreButton();
});

function readMoreButton(){
  $(document).on('click', 'button.read-more.btn-more', function(event){
    event.preventDefault();
    appendReadMore(this.attributes.href.value)
  });
}

function appendReadMore(url){
  $.get(url, function (result){
    $("#ReadMoreSpan").html("Location:"+result[0].location);
  });
}

function iterateJobs(jobs){
  var str = "<ul>";
  jobs.forEach(function(job){
    var job_id = job.id;
    var link_path = '/repairmen/' + job['repairman']['id'] + '/jobs/' + job['id'];
    str += '<li>Repairman: ' + job['repairman']['name'] + '<br>';
    str += 'Customer: ' + job['customer']['name'] + '<br>';
    str += '<ul>';
    str += iterateTickets(job['tickets']);
    str += '</ul>';
    str += '<button class="edit btn-info" href="' + link_path + '/edit">Edit Job</button>  |  ';
    str += '<button ' + `id=${job_id} ` + 'class="delete btn-danger" href="' + link_path + '">Delete Job</button> | ';
    str += '<button class="read-more btn-more" href="' + link_path + '">Read More</button> <br><br>';
str+='<span id="ReadMoreSpan" ></span>';
    str += '</li>';
  });
  str += '</ul>';
  return str;
}

Answer 1

那是因为您最终将获得具有相同ID（spans）的多个#ReadMoreSpan，因此，每当调用函数时，它将AJAX调用的结果放入第一个。您需要做两件事：

让所有阅读的内容跨越唯一的ID，以便对其进行识别
将该ID传递给事件处理程序以进行链接点击。

让我们从ID开始，然后将其作为跨度上的数据参数添加（并删除#ReadMoreSpan，因为ID应该是唯一的：

str += '<span data-job="' + job_id + '"></span>';

完成此操作后，我们需要能够在获取更多数据时访问此ID，因此请向按钮添加相同的ID：

str += '<button class="read-more btn-more" data-job="' + job_id + '" href="' + link_path + '">Read More</button> <br><br>';

现在可以更新这两个函数来处理该值：

function readMoreButton() {
  $(document).on('click', 'button.read-more.btn-more', function(event){
    event.preventDefault();
    appendReadMore(this.attributes.href.value, this.getAttribute('data-job'))
  });
}

function appendReadMore(url, jobId) {
  $.get(url, function (result){
    $("span[data-job='" + jobId + "']").html("Location:"+result[0].location);
  });
}

如何为索引列表中的每个项目添加显示功能？

1 个答案: