Question

我的应用程序要求用户上传一组必需的文档（上传＃1，上传＃2，上传＃3）。用户还可以上传其他非必需文档。

首次加载页面时，它会在列表中显示所需的文档集。每个列表项最初都设置为class="missing"。我的目标是在用户上传所需文档（列表中已有的文档）时将其更改为class="complete"。但是，如果他们上传了一个不需要的文档（一个不在列表中的文档），它会将该文档附加到列表的末尾。

文档的名称在上传表单的category变量中传递。

我该怎么做？有没有办法检查列表中是否已存在该项目？

PARENT PAGE 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

我认为这有你想要的一切。我没有在实际的文件上传器中尝试编码，我只是创建了三个按钮来覆盖你的三个用例。

用户上传所需文件
用户上传不需要的文件
用户上传错误文件

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

如何使用jQuery动态更新CSS样式列表？

1 个答案: