Question

这是我jQuery的第一天，所以请耐心等待。目前，我通过执行以下操作向我的父容器添加元素：

var uploadedContainer =$('#uploadedimages');
var uploadedItem = '<div><span>'+file.name
                 + '</span><span><a class="mylink" href=remove.aspx?img='
                 + safeUrl+'>Remove</a></span></div>';
uploadedContainer.append(uploadedItem);

虽然它有效，但我不确定这是否是完成此任务的正确方法。此外，是否可以将元素添加到父元素，并淡化子元素？使用的一个例子很棒！

Answer 1

如果您要反复添加类似的元素，我会避免在代码中使用冗长的字符串。它们很难维护，并且创建难以阅读的代码。我建议您使用像Handlebars这样的模板工具：

<script type="text/x-handlebars-template" id="tmpl">
    <div>
        <span>{{filename}}</span>
        <span><a href="remove.aspx?image={{safeUrl}}">Remove</a></span>
    </div>
</script>

现在我们从上面构建一个编译模板：

var template = Handlebars.compile( $("#tmpl").html() );

现在剩下的就是用我们的数据对象调用template函数，将得到的标记附加到我们的容器（或主体），然后将其淡入。

var data = { 
    filename: "foo.png", 
    safeUrl: encodeURIComponent("foo image")
};

$("body").append(template(data)).fadeIn();

结果更清晰，更清晰，代码更有意义且易于维护。

在线演示：http://plnkr.co/edit/7JVa2w6zOXdITlSfOOAv?p=preview

Answer 2

var uploadedItem = '<div><span>'+file.name+'</span><span><a class="mylink" href=remove.aspx?img='+safeUrl+'>Remove</a></span></div>';

你应该避免将HTML与这样的字符串一起抛出。如果file.name或safeUrl中包含<或&字符会怎样？在最好的情况下，您生成了无效的HTML，在最糟糕的情况下，您刚刚在应用中留下了跨站点脚本安全漏洞。

此外，encodeURIComponent上没有safeUrl编码（除非您已经这样做了）。为了可靠性，还需要做。由于href属性上缺少引号，还有更多字符可能会因safeUrl而中断。

更好：使用text()方法设置元素的文本内容，使用attr()将属性设置为值。然后您不必担心HTML转义。例如：

var div= $('<div><span></span><span><a class="mylink">Remove</a></div>');
div.find('span').eq(0).text(file.name);
div.find('span').eq(1).attr('href', 'remove.aspx?img='+encodeURIComponent(url));
div.appendTo('#uploadedimages');

Answer 3

该代码应该有效。您可以添加此代码以淡化内容：

  $('#uploadedimages').fadeIn('slow', function() {
    // Animation complete
  });

您需要将上传图片的可见性设置为隐藏，以使其正常工作。

JQuery文档非常好。我建议访问JQuery site。

以下是关于淡入淡出的link。

jQuery - 添加子元素的正确方法？

3 个答案: