JavaScript。创建两个具有不同 url 的按钮。但最后制作的按钮会覆盖旧按钮

Question

我的代码有一个按钮，可以将文件打印为 pdf 表单(效果很好)。现在我想添加另一个按钮，只在 html 页面中打印它。我添加了新按钮，它也可以工作。

问题是，现在当我创建一个新按钮时，它现在会覆盖旧按钮的方法。所以两个按钮都会做同样的事情。 (均以html形式打印)

这是我的代码的一部分:

发票数据表的函数如下所示:

function invoiceDatatable(tableId, extras, url, optionParser) {
 var options = $.extend(true, {}, documentOptions, {
  tableId: tableId,
 url: url || '/api/invoices/?type=i',
  extras: extras
});

在这里，我创建了两个按钮及其 url - 代码始终使用最后创建的按钮:

options.tasks.push({
url: '/print_to_pdf',
queryParam: 'documents',
label: '<i class="fa fa-print"></i> Print pdf'
});

options.tasks.push({
url: '/print_to_html',
queryParam: 'documents',
label: '<i class="fa fa-print"></i> Print html'
});

最后，按钮任务的代码如下所示:

for (var i = 0; i < self.tasks.length; i++) {
var task = self.tasks[i];
var taskButton = $('<button type="button">' + (task.label || task) + '</button>');
taskButton.addClass('btn btn-default');
$(taskButtons).append(taskButton);
if (task.action) {
  // An entry point for custom actions
  $(taskButton).click(function(){
    task.action(self.selected);
  })
} else {
  $(taskButton).click(function () {
    var downloadUrl = task.url + '?' + task.queryParam + '=' + self.selected.join(',');
    downloadUrl += "&ordering=" + self.ordering()['ordering'];
    $(infoPanel + ' .alert').remove();
    $(infoPanel).append('<div class="alert alert-info">' +
      '<i class="fa fa-circle-o-notch fa-spin"></i> Building document' +
      '</div>');
    $.ajax(downloadUrl, {
      success: function (data) {
        function doPoll(url, success) {
          $.ajax(jobUrl, {
            type: "HEAD",
            success: function (pdfData, status, xhr) {
              if (xhr.status == 202) {
                setTimeout(function () {
                  doPoll(url, success)
                }, 2000);
              } else {
                success()
              }
            }
          });
          $.ajax(url, function (data) {
            alert(data);  // process results here
            setTimeout(doPoll, 5000);
          });
        }

如何修复我的代码以使每个按钮都有自己的功能？

我认为是push方法覆盖了action。大家觉得怎么样？

Answer 1

由于变量声明被提升(并且不在 for 循环范围内)，因此似乎存在封装问题。使用 .forEach 代替 for 循环:

self.tasks.forEach(function(task) {
    var taskButton = $('<button type="button">' + (task.label || task) + '</button>');
    taskButton.addClass('btn btn-default');
    ...
});

这会将整个按钮构建代码包装到每个按钮自己的范围内。

如果您不支持.forEach，请使用立即调用的匿名函数:

for (var i = 0; i < self.tasks.length; i++) {
    (function() {
        var task = self.tasks[i];
        var taskButton = $('<button type="button">' + (task.label || task) + '</button>');
        taskButton.addClass('btn btn-default');
        ...
    })();
}