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. 사용자 업로드 nonrequired 파일
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>');    
}