Как изменить видимость элемента с помощью jQuery?

Question

Мое приложение требует, чтобы пользователи загружали набор необходимых документов (Upload # 1, Upload # 2, Upload # 3). Когда загрузка завершается, она возвращает идентификатор требования (req_id).

На странице отображается список требований и в настоящее время изменяется класс от «отсутствует» до «завершена» после загрузки определенного элемента. Тем не менее, я также хотел бы изменить видимость значка «удалить» из скрытого в видимый после завершения загрузки.

HTML:

<ul> 
    <li class="missing" rel="1"> 
     <span class="link"> 
      <a href="#" target="_blank">Upload #1</a> 
     </span> 
     <span class="controls"> 
      <img src="download.png" class="download" <? if ($req_item['class'] == "missing") { echo 'style="visibility: hidden;"'; } ?> >   
      <img src="trash.png" class="delete" <? if ($req_item['class'] == "missing") { echo 'style="visibility: hidden;"'; } ?> > 
     </span> 
    </li> 
    <li class="missing" rel="2"> 
     <span class="link"> 
      <a href="#" target="_blank">Upload #2</a> 
     </span> 
     <span class="controls"> 
      <img src="download.png" class="download" <? if ($req_item['class'] == "missing") { echo 'style="visibility: hidden;"'; } ?> >   
      <img src="trash.png" class="delete" <? if ($req_item['class'] == "missing") { echo 'style="visibility: hidden;"'; } ?> > 
     </span> 
    </li> 
    <li class="missing" rel="3"> 
     <span class="link"> 
      <a href="#" target="_blank">Upload #3</a> 
     </span> 
     <span class="controls"> 
      <img src="download.png" class="download" <? if ($req_item['class'] == "missing") { echo 'style="visibility: hidden;"'; } ?> >   
      <img src="trash.png" class="delete" <? if ($req_item['class'] == "missing") { echo 'style="visibility: hidden;"'; } ?> > 
     </span> 
    </li> 
</ul> 

Javascript:

function stopUpload(success, req_id){ 

    if (success == 1){ 
     $('#upload_result').html('<span class="msg">Success!<\/span>'); 
     $("ul li[rel=" + req_id + "]").removeClass().addClass('complete') 
     $("ul li[rel=" + req_id + "]").child('.controls').child('.delete').css('visibility','visible') 
    } 
    else { 
     $('#upload_result', window.parent.document).html(
     '<span class="emsg">Error!<\/span>'); 
    } 
    $('#upload_progress').hide(); 
    return true; 

} 

Answer 1

Чтобы использовать JQuery, замените

$("ul li[rel=" + req_id + "]").removeClass().addClass('complete') 
$("ul li[rel=" + req_id + "]").child('.controls').child('.delete').css('visibility','visible') 

By:

$("ul li[rel=" + req_id + "]").removeClass().addClass('complete').find('.controls .delete').show(); 

Однако, вы должны использовать CSS для этого. Так держать свой первоначальный JQuery и добавьте в CSS:

ul li .controls .delete { 
    display: block; 
} 
ul li.complete .controls .delete { 
    display: none; 
} 

Answer 2

Вы хотите изменить

$("ul li[rel=" + req_id + "]").child('.controls').child('.delete').css('visibility','visible') 

в

$("ul li[rel=" + req_id + "] .controls .delete").show() 

Должно работать красиво.

Вместо видимости, я предпочитаю использовать свойство дисплея - display:none; или display:block; или display:inline;