jQuery: ¿la forma correcta de agregar un elemento secundario?

Question

Este es mi primer día de jQuery, así que tengan paciencia conmigo. Actualmente, estoy añadiendo un elemento a mi contenedor padre haciendo lo siguiente:

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

Mientras que funciona, no estoy seguro de si esa es la forma correcta de realizar esta tarea. Además, ¿es posible agregar el elemento al elemento primario y desvanecer el elemento secundario? ¡Un ejemplo de uso sería genial!

Answer 1

Si vas a agregar elementos similares una y otra vez, evitaría usar cadenas largas en tu código. Son difíciles de mantener y crean un código difícil de leer. Yo en cambio te animaría a utilizar una herramienta de plantillas como 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> 

Ahora construimos una plantilla compilada a partir de lo anterior:

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

Todo lo que queda ahora es llamar a la función template con nuestra objeto de datos, añadir el margen de beneficio resultante para nuestro contenedor (o corporal), y se desvanecen en.

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

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

el resultado es más limpio, más legible, co de eso tendrá sentido y será fácil de mantener.

Demo Online: http://plnkr.co/edit/7JVa2w6zOXdITlSfOOAv?p=preview

Answer 2

Ese código debería funcionar. Puede agregar este código a desvanecerse algo en:

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

Tendrá que establecer la visibilidad de uploadedimages en Oculto para que esto funcione.

La documentación de JQuery es muy buena. Sugiero visitar el JQuery site.

Aquí es una link para usted con respecto a la decoloración algo en.

Answer 3

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

usted debe evitar HTML eslinga junto con las cadenas de este tipo. ¿Qué ocurre si file.name o safeUrl tiene un carácter < o & en? En el mejor de los casos, está generando HTML no válido, en el peor de los casos, acaba de dejar un agujero de seguridad de secuencias de comandos entre sitios en su aplicación.

Además, no hay codificación encodeURIComponent en safeUrl (a menos que ya lo haya hecho). Eso tendría que hacerse también para la fiabilidad. También hay muchos más caracteres que pueden romperse con safeUrl debido a las comillas que faltan en el atributo href.

Mejor: utilice el método text() para establecer el contenido de texto de un elemento, y attr() para establecer un atributo en un valor. Entonces no necesita preocuparse por el escape de HTML. eg .:

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