Javascript。用不同的網址創建兩個按鈕。但最後一個按鈕覆蓋舊按鈕

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

在這裏，我創建兩個按鈕，用自己的網址 - 代碼總是使用最後創建了一個：

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

如何解決我的代碼，使每個按鈕都有自己的功能？

我認爲這是推覆蓋行動的方法。你們有什麼感想？

Answer 1

由於變量聲明被掛起（並且範圍不在for循環範圍內），看起來像封裝問題。取而代之的是for循環，使用.forEach：

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'); 
     ... 
    })(); 
}