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

Я бы рассмотрел другой способ, разделив ваш html с вашего javascript-кода. В качестве предложения в вашем конкретном случае, возможно, с использованием запроса 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);