如何使用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>');    
}