如何使用jQuery動態更新CSS樣式列表？

Question

我的應用程序要求用戶上傳一組必需的文檔（上傳＃1，上傳＃2，上傳＃3）。用戶還能夠上傳額外的非必需文件。

第一次加載頁面時，它會在列表中顯示所需的一組文檔。每個列表項目最初設置爲class="missing"。我的目標是如果用戶上傳一個所需文檔（列表中已有的文檔），它會將列表項目更改爲class="complete"。但是，如果他們上傳非必需的文檔（不在列表中的文檔），它會將該文檔附加到列表的末尾。

文檔的名稱在上傳表單中的category變量中傳遞。

我該怎麼辦？有沒有辦法檢查項目是否已經存在於列表中？

父頁面JQUERY：

function stopUpload(success, category){ 

    if (success == 1){ 
     $('#upload_result').html('<span class="msg">The file was uploaded successfully!<\/span>');    
     $('#uploads ul:last').append('<li class="complete"><a href="#" target="_blank">' + category + '</a><a href="#" target="_blank" class="delete"><img src="../../media/icons/delete.png"></a><\/li>'); 
    } 
    else { 
     $('#upload_result', window.parent.document).html(
     '<span class="emsg">There was an error during file upload!<\/span>'); 
    } 
    $('#upload_progress').hide(); 
    return true; 

} 

$(document).ready(function() { 

    $('#imaged_documents_upload').submit(function() { 

     $('#upload_progress').show(); 

    }); 

}) 

父頁面的HTML：

<div id="uploads"> 
    <ul> 
    <li class="missing"> 
     <a href="#" target="_blank">Upload #1</a> 
     <a href="#" target="_blank" class="delete"> 
      <img src="../../media/icons/delete.png"> 
     </a> 
    </li> 
    <li class="missing"> 
     <a href="#" target="_blank">Upload #2</a> 
     <a href="#" target="_blank" class="delete"> 
      <img src="../../media/icons/delete.png"> 
     </a> 
    </li> 
    <li class="missing"> 
     <a href="#" target="_blank">Upload #3</a> 
     <a href="#" target="_blank" class="delete"> 
      <img src="../../media/icons/delete.png"> 
     </a> 
    </li> 
    </ul> 

IFRAME：

$(document).ready(function() { 

    parent.stopUpload(<?php echo $result.', \''.$category.'\''; ?>); 

} 

Answer 1

我覺得這一切你是後。我沒有打算在實際的文件上傳器中編寫代碼，我只是創建了三個按鈕來覆蓋你的三個用例。

1. 用戶上傳所需的文件
2. 用戶上傳非必需文件
3. 用戶上傳壞文件

我使用的標題屬性存儲所需的文件的名稱和比較給你的類變量。

http://jsfiddle.net/xg9F6/4/

if (success == 1) { 
    //file was successfully uploaded 
    $('#upload_result') 
     .html('The file was uploaded successfully!') 
     .removeClass() 
     .addClass('success'); 

    var elem = $('#uploads li[title="' + category + '"]'); 

    //check if this was a required element 
    if ($(elem).length > 0) {    
     $(elem).each(function() { 
      $(this).removeClass().addClass('complete'); 
     }); 
    } 
    else { 
     elem = $('#uploads li:last').clone(); 
     $('#uploads ul').append(elem); 
    } 
    $(elem).append('<span>' + category + '</span>');    
}