Question

我有這條長長的代碼，它附加了jQuery .append()方法的幾個元素。

$('#file-names-js').append("<tr><td>"+fileName+"</td><td><input class='pull-right main-radio' onchange='Product.uncheck($(this));' name='product[images_attributes]["+formNum+"][main]' type='radio' "+checked+"></td><td><a class='close' onclick='Product.removeImage($(this), "+formNum+");' href='#'>×</a></td></tr>"); 

我試圖使用逗號分隔的元件和具有他們在不同的行（所以它會少可怕）通過，因爲它們嵌套在<tr>內。所以，當它們分開時，它會在導致問題的其他元素之前生成空的<tr></tr>。

澄清：通過更好地我的意思是更具可讀性

Answer 1

您也許對此感興趣：https://stackoverflow.com/a/21902582/1636522。

$('#file-names-js').append(
    '<tr>' + 
     '<td>' + fileName + '</td>' + 
     '<td><input ' + 
      'class="pull-right main-radio" ' + 
      'onchange="Product.uncheck($(this));" ' + 
      'name="product[images_attributes][' + formNum + '][main]" ' + 
      'type="radio" ' + 
      checked + 
     '></td>' + 
     '<td><a ' + 
      'href="#" ' + 
      'class="close" ' + 
      'onclick="Product.removeImage($(this), ' + formNum + ');"' + 
     '>×</a></td>' + 
    '</tr>' 
); 

Answer 2

$('<tr>') 
    .append('<td>').text(filename) 
    .append('<td>').addClass('pull-right main-radio').attr('name', product.images_attributes[formNum].main).click(function(){ some code }) 
    .append('<td>').append( 
     $('<a>').attr('href', '#').addClass('close').click(function(){ some code })); 

這psudo代碼將無法編譯，但你的想法。如果我的語法錯誤，隨意編輯，但我認爲這個問題的精神是如何讓我的代碼看起來更好，因此更易於維護。

Answer 3

我會考慮通過從您的JavaScript代碼分離您的HTML另一種方式。 作爲一個在你的具體情況下的建議，也許通過使用ajax請求和一些簡單的PHP代碼是你可以通過代碼更容易閱讀和更好控制的方式來實現這一點。

例如，你有類似php模板的東西，它接收來自你的javascript的變量，把它放在你的表中，並將它返回給你的腳本進一步操作。

stuff.php：

<?php 
$filename = isset($_POST['filename']) ? $_POST['filename'] : ''; 

$html = '<table> 
      <tr> 
       <td>'.$filename.'</td> 
      </tr> 
     </table>'; 

return $html; 
?> 

現在

，如果你想你的表追加到你的元素，你剛剛火Ajax調用來檢索表，如果成功的話，將其附加到你的元素是這樣的：

$.ajax({ 
    type: 'post', 
    url: 'stuff.php', 
    data: 'filename='+fileName, 
    success: function(data) { 
     $('#file-names-js').append(data); 
    } 
}); 

這當然簡化了，只是一個例子。如果你不知道，你應該首先閱讀關於Ajax的內容。希望它有一點幫助。

Answer 4

我會從這樣的事情開始。這只是一個示例，而不是上面的確切代碼。我還建議你從HTML中移動這些內聯事件處理程序。

var appendHTML = [ 
"<tr>", 
    "<td>", fileName, "</td>", 
    "<td>", 
     "<input class='pull-right main-radio' name='product[images_attributes][", formNum, "][main]' type='radio' ", checked, " />", 
    "</td>", 
    "<td>", 
     "<a class='close' href='#'>×</a>", 
    "</td>", 
"</tr>"].join(''); 

$('#file-names-js').append(appendHTML);