Как я могу пропустить новый сгенерированный массив, не перезаписывая его?

Question

Я изучаю код самостоятельно, поэтому мои знания не такие технические, как вы ожидали. Сказав это, я работаю над проектом, который обрабатывает изображения и включает в себя показ информации о них с объектом fileList для пользователя, часть этой информации показана в этом формате: Chrysanthemum.jpg (image/jpeg) - 879394 байт , последнее изменение: 13/7/2009. Моя программа позволяет пользователю удалять предварительно выбранные файлы перед загрузкой оставшихся, когда этот элемент удаляется из группы, информация об этом должна идти. Я не собираюсь заставлять вас сходить с ума от чтения +600 строк кода, чтобы вы могли решить мою проблему, поэтому я даю вам очень простой обобщенный подход к моей проблеме.

в данном случае мы хотим удален первый элемент, когда функция вызывается так загляните к следующему коду:

<input type='button' id='load' value='Load_info' /> 
<div id='ok'> 
    <ul id='pic_info'></ul> 
</div> 
<div id='message'></div> 
<input type='button' id='bye' value='Bye[0]' /> 


var files = ["Chrysanthemum.jpg (image/jpeg) - 879394 bytes, last modified: 13/7/2009", "Desert.jpg (image/jpeg) - 845941 bytes, last modified: 13/7/2009", "Hydrangeas.jpg (image/jpeg) - 595284 bytes, last modified: 13/7/2009", "Jellyfish.jpg (image/jpeg) - 775702 bytes, last modified: 13/7/2009", "Koala.jpg (image/jpeg) - 780831 bytes, last modified: 13/7/2009", "Lighthouse.jpg (image/jpeg) - 561276 bytes, last modified: 13/7/2009", "Penguins.jpg (image/jpeg) - 777835 bytes, last modified: 13/7/2009"]; 

var once = 0; 
var a = ''; 
var d = ''; 
//someFlag = true; 
//var upd = []; 
var e; 
var f = ''; 
var g = 0; 

function load() { 
    for (var i = 0; i < files.length; i++) { 
     a += "<li>" + files[i] + "</li>"; 
     $("#pic_info").html(a); 
     e = $("#pic_info li").length; 
    } 
} 



function delete_item(arr, inx) { 
    if (e <= 0) { 
     e = 7; 
    } else { 
     e -= 1; 
    } 
    //for (var c = 0; c < arr.length; c++) { 
     // d += "<li>" + arr[c] + "</li>"; 
     //$("#pic_info").html(d); 
    //} 
    arr.splice(inx, 1); 
    $("#pic_info").html(arr); 
} 

$("#load").click(function() { 
    if (once == 0) { 
     load(); 
     once = 1; 
    } else { 
     $("#message").html("<strong>files already loaded</strong>"); 
    } 
}); 

$("#bye").click(function() { 
    delete_item(files, 0); 
}); 

Я не был в состоянии найти эффективный способ переставить " arr "в тегах« li », я попытался их пропустить, но если вы включите« цикл цикла », то произойдет сам массив, он будет перезаписан новым выходом, пока не достигнет последнего элемента. Я пробовал кучу вещей, чтобы исправить эту, казалось бы, простую проблему, и я не мог ... Я сдался и решил получить помощь от людей с лучшим образованием.

PD: Я знаю, что есть тысячи плагинов для обработки файлов. Я просто хочу проверить некоторые изученные навыки.

здесь это скрипка: * jsfiddle

Спасибо за ваше время, я действительно ценю это, и я надеюсь, что я объяснил себе

Answer 1

Я не 100% уверен, что ваш вопрос, но я полагаю, ваши спрошу как удалить первый элемент li после загрузки файлов. Это верно?

Если это так, вы можете просто использовать селектор jQuery в своем элементе delete, и он удалит первый li, но не повлияет на массив файлов.

$("li").first().remove(); 

Answer 2

Если вы хотите поместить новые данные с вне перезаписывать старые данные использовать .append() Я вижу, что вы используете .html() это установит HTML над старым. Использовать .append() вместо