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>。

TO CLARIFY：更好的意思是更具可读性

Answer 1

$('<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 2

我会考虑通过从您的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 3

您可能也对此感兴趣：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 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);

有没有更好的方法来使用jQuery追加这些元素？

4 个答案: