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

How to dynamically update CSS styled list using jQuery?

本文关键字：CSS 样式 列表 更新 动态 何使用 jQuery      更新时间：2023-09-26

我的应用程序要求用户上传一组所需的文档(上载#1，上载#2，上载#3)。用户还可以上传额外的、非必需的文档。

第一次加载页面时，它在一个列表中显示所需的文档集。每个列表项初始设置为class="missing"。我的目标是这样做，如果用户上传一个所需的文档(一个已经在列表中)，它将列表项更改为class="complete"。但是，如果他们上传非必需的文档(不在列表上的文档)，则将该文档附加到列表的末尾。

文件名称通过category变量从上传表单中传入。

我该怎么做呢?是否有办法检查项目是否已经存在于列表中?

父页面:

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

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

  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>');            
}
相关文章：