javascript - 如何使用 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>

内嵌框架:

$(document).ready(function() {

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

}

Answer 1

我想这有你想要的一切。我没有尝试在实际的文件 uploader 中编写代码，我只是创建了三个按钮来涵盖您的三个用例。

1. 用户上传所需文件
2. 用户上传不需要的文件
3. 用户上传错误文件

我使用 title 属性来存储所需文件的名称，并将其与您的类别变量进行比较。

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