如何使用 jQuery 更改项目的可见性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8548506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change visibility of item using jQuery?
提问by Michael
My application requires that users upload a set of required documents (Upload #1, Upload #2, Upload #3). When an upload completes, it returns the requirement identifier (req_id).
我的应用程序要求用户上传一组必需的文档（上传 #1、上传 #2、上传 #3）。上传完成后，它会返回需求标识符 (req_id)。
The page displays a list of the requirements, and currently changes the class from "missing" to "complete" once a particular item is uploaded. However, I'd also like to change the visibility of a "delete" icon from hidden to visible once the upload is complete as well.
该页面会显示要求列表，并且一旦上传了特定项目，当前将类从“缺失”更改为“完成”。但是，我还想在上传完成后将“删除”图标的可见性从隐藏更改为可见。
HTML:
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:
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;
}
回答by Richard
To use jQuery, replace
要使用 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();
However, you should use CSS for this. So keep your original jQuery and add this to CSS:
但是，您应该为此使用 CSS。所以保留你原来的 jQuery 并将其添加到 CSS：
ul li .controls .delete {
display: block;
}
ul li.complete .controls .delete {
display: none;
}
回答by SpoonNZ
You want to change
你想改变
$("ul li[rel=" + req_id + "]").child('.controls').child('.delete').css('visibility','visible')
to
到
$("ul li[rel=" + req_id + "] .controls .delete").show()
Should work nicely.
应该很好用。
Rather than visibility, I'd tend to use the display property - display:none;or display:block;or display:inline;
而不是知名度，我会倾向于使用显示属性-display:none;或者display:block;或display:inline;
