Comment changer la visibilité d'un article en utilisant jQuery?

Question

Mon application nécessite que les utilisateurs téléchargent un ensemble de documents requis (Upload # 1, Upload # 2, Upload # 3). Lorsqu'un chargement est terminé, il renvoie l'identifiant d'exigence (req_id).

La page affiche une liste des exigences et change actuellement la classe de «manquant» à «terminer» une fois qu'un élément particulier a été téléchargé. Cependant, je voudrais aussi changer la visibilité d'une icône "supprimer" de cachée à visible une fois le téléchargement terminé.

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

Pour utiliser jQuery, remplacer

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

Par:

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

Cependant, vous devriez utiliser CSS pour cela. Alors gardez votre jQuery original et ajouter à CSS:

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

Answer 2

Vous voulez changer

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

à

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

Devrait fonctionner correctement.

Plutôt que de la visibilité, je tendance à utiliser la propriété d'affichage - display:none; ou display:block; ou display:inline;