如何使用jQuery更改物品的可见性？

Question

我的应用程序要求用户上传一组必需文档(上传#1、上传#2、上传#3)。当上传完成时，它会返回要求标识符(req_id)。

页面显示了要求的列表，并且当前在特定项目上传后将类从"missing"更改为"complete"。但是，我还希望一旦上传完成，也可以将"删除"图标的可见性从隐藏更改为可见。

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;

}

- Michael

---

我在你的帖子中还没有找到问题... - annonymously

jQuery没有child方法。请使用children()代替。 - Rob W

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;
}

- Richard

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;

- SpoonNZ

---

你的代码与原始代码不相等。要选择子元素，必须使用 >（父子选择器）：$("ul li[rel=" + req_id + "] > .controls > .delete")。 - Rob W

显示命令会完全移除图像并相应地调整其他内容，我认为 OP 的意图只是让图像不可见。 - annonymously

@RobW：没错，但是考虑到原始HTML，这样做也没问题——实际上，li元素没有多个.control后代元素。事实上，$("ul li[rel=" + req_id + "] .delete")同样可以工作。 - SpoonNZ

@annonymously：是的，我也在想。缺乏任何真正的问题使它变得困难！.show()和.hide()很好而且简单，往往会“只是工作”；显然他的可见性行不通:S - SpoonNZ

@Rob，那不是真的。> 仅用于选择直接子元素。在这种情况下，它根本没有任何价值。 - Richard

@Richard .children() 相当于 >。 - Rob W