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

Question

Мое приложение требует, чтобы пользователи загружали набор необходимых документов (Загрузка № 1, Загрузка № 2, Загрузка № 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')

на:

$("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 - display:none; или display:block; или display:inline;