jQuery — Правильный способ добавить дочерний элемент?
Это - мой первый день 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);
В то время как это работает, я не уверен - ли это правильный способ выполнить эту задачу. Кроме того, действительно ли возможно добавить элемент к родителю и постепенно появиться дочерний элемент? Пример использования был бы ярким!
3 ответа
Если вы собираетесь добавлять похожие элементы снова и снова, я бы избегал использования длинных строк в вашем коде. Их сложно поддерживать, и они создают трудный для чтения код. Вместо этого я бы посоветовал вам использовать такой инструмент для создания шаблонов, как 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() );
Все, что осталось, это вызвать шаблон ] с нашим объектом данных, добавляем получившуюся разметку к нашему контейнеру (или телу) и затемняем его.
var data = {
filename: "foo.png",
safeUrl: encodeURIComponent("foo image")
};
$("body").append(template(data)).fadeIn();
В результате получается более чистый и разборчивый код, который будет иметь смысл и его будет легко поддерживать.
Интернет-демо: http://plnkr.co/edit/7JVa2w6zOXdITlSfOOAv?p=preview
Этот код должен работать. Вы можете добавить этот код, чтобы что-то скрыть:
$('#uploadedimages').fadeIn('slow', function() {
// Animation complete
});
Чтобы это работало, вам нужно установить видимость загруженных изображений как скрытые.
Документация JQuery очень хороша. Я бы посоветовал посетить сайт JQuery .
Вот ссылка для вас по поводу исчезновения чего-либо.
var uploadedItem = '<div><span>'+file.name+'</span><span><a class="mylink" href=remove.aspx?img='+safeUrl+'>Remove</a></span></div>';
Вам следует избегать объединения HTML с такими строками. Что если имя_файла или safeUrl содержит символ < или & ? В лучшем случае вы создаете недопустимый HTML-код, в худшем - вы просто оставили дыру в безопасности межсайтового скриптинга в своем приложении.
Кроме того, в safeUrl нет кодировки encodeURIComponent (если вы еще не сделали это). Это тоже нужно сделать для надежности. Есть также много других символов, которые могут не работать с safeUrl из-за отсутствия кавычек в атрибуте href.
Лучше: используйте метод 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');