如何使用 jQuery 更改项目的可见性？答案

【问题标题】：How to change visibility of item using jQuery?如何使用 jQuery 更改项目的可见性？
【发布时间】：2012-01-22 19:49:48
【问题描述】：

我的应用程序要求用户上传一组必需的文档（上传 #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;

}

【问题讨论】：

我还没有在您的帖子中找到问题...
jQuery 没有child 方法。请改用children()。

标签： jquery css visibility

【解决方案1】：

你想改变

$("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;

【讨论】：

您的代码与原始代码不相等。要选择孩子，您必须使用>（父子选择器）：$("ul li[rel=" + req_id + "] > .controls > .delete")。
display 完全删除了图像并相应地改变了一切，我认为 op 试图让图像不可见
@RobW：正确，但是考虑到原始 HTML，它很好 - 没有 li 实例具有多个 .control 后代 - 事实上，$("ul li[rel=" + req_id + "] .delete") 也可以。
@annonymously：是的，我想知道。缺乏任何真正的问题使得它变得困难！ .show() 和 .hide() 又好又简单，并且倾向于“正常工作”；显然他的能见度线不起作用：S
@Rob，这不是真的。 > 用于仅选择直接子级。在这种情况下，它根本没有增加任何价值。

【解决方案2】：

要使用 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;
}

【讨论】：