按下后如何隐藏“编辑”链接?当我按下编辑键时,是否还可以隐藏“ lorem ipsum”文本?
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</td>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
<td class="post">
<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>
您还可以使用以下代码显示/隐藏元素:
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";
注意使用displayibility:hidden与display:none时,style.visibility
和之间的区别style.display
是,该标签不可见,但在页面上为其分配了空间。标签已呈现,只是在页面上看不到。
请参阅此链接以查看差异。
我想建议您使用JQuery选项。
$("#item").toggle();
$("#item").hide();
$("#item").show();
例如:
$(document).ready(function(){
$("#item").click(function(event){
//Your actions here
});
});
我建议这样做以隐藏元素(如其他人所建议的那样):
document.getElementById(id).style.display = 'none';
但是为了使元素可见,我建议这样做(而不是display ='block'):
document.getElementById(id).style.display = '';
原因是在我正在处理的页面上,使用display ='block'会导致在IE(11)和Chrome(版本43.0.2357.130 m)中都可见的元素旁边出现额外的空白/空白。
当您首次在Chrome中加载页面时,没有样式属性的元素将在DOM检查器中显示为:
element.style {
}
如预期的那样,使用标准JavaScript对其进行隐藏:
element.style {
display: none;
}
使用display ='block'使它再次可见将其更改为:
element.style {
display: block;
}
这与原来不同。在大多数情况下,这可能不会有任何区别。但是在某些情况下,确实会引入异常。
使用display =''确实可以将它恢复到DOM检查器中的原始状态,因此这似乎是更好的方法。
您可以使用element的隐藏属性:
document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false
您应该尽可能地将JS用作行为,将CSS用作可视化糖果。通过稍微更改HTML:
<td class="post">
<a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
<span id="answer1" class="post-answer">
<textarea rows="10" cols="115"></textarea>
</span>
<span class="post-text" id="text1">Lorem ipsum ... </span>
</td>
您只需使用CSS规则即可从一个视图切换到另一个视图:
td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
display : none;
}
以及在两个类之间切换的JS代码
<script type="text/javascript">
function showStuff(aPostTd) {
aPostTd.className="post-editing";
}
</script>
尽管这个问题已经被回答过很多次了,但我想我会为将来的用户提供更完整,更可靠的答案。主要答案确实可以解决问题,但我相信最好是了解/理解显示/隐藏事物的各种方式。
。
使用css()更改显示
在找到其他一些方法之前,这就是我以前使用的方法。
Javascript:
$("#element_to_hide").css("display", "none"); // To hide
$("#element_to_hide").css("display", ""); // To unhide
优点:
- 隐藏和隐藏。就是这样
缺点:
- 如果将“ display”属性用于其他内容,则必须对隐藏之前的值进行硬编码。因此,如果您具有“内联”功能,则必须这样做,
$("#element_to_hid").css("display", "inline");
否则它将默认恢复为“阻止”或任何其他强制执行的功能。 - 容易造成错字。
示例:https: //jsfiddle.net/4chd6e5r/1/
。
使用addClass()/ removeClass()更改显示
在为该示例设置示例时,我实际上在此方法上遇到了一些缺陷,使其非常不可靠。
CSS / Javascript:
.hidden {display:none}
$("#element_to_hide").addClass("hidden"); // To hide
$("#element_to_hide").removeClass("hidden"); // To unhide
优点:
- 隐藏....有时。请参考示例中的p1。
- 取消隐藏后,有时会返回到使用以前的显示值。请参考示例中的p1。
- 如果要抓取所有隐藏的对象,只需要做
$(".hidden")
。
缺点:
- 如果显示值是直接在html上设置的,则不会隐藏。请参考示例中的p2。
- 如果显示是使用css()在javascript中设置的,则不会隐藏。请参考示例中的p3。
- 因为您必须定义css属性,所以代码略多。
示例:https://jsfiddle.net/476oha8t/8/
。
使用toggle()更改显示
Javascript:
$("element_to_hide").toggle(); // To hide and to unhide
优点:
- 一直有效。
- 使您不必担心切换之前的状态。明显的用途是用于.... toggle按钮。
- 简短而简单。
缺点:
- 如果您需要知道要切换到哪个状态以执行不直接相关的操作,则必须添加更多代码(if语句)以找出它处于哪个状态。
- 与前一个骗局类似,如果您要运行一组包含toggle()的指令以进行隐藏,但是不知道该指令是否已被隐藏,则必须添加一个检查(if语句)首先找出它是否已经隐藏,然后跳过。请参考示例的p1。
- 与前面的2个缺点有关,对于特定的隐藏或特定显示内容使用toggle(),可能会使其他人在阅读您的代码时感到困惑,因为他们不知道他们将以哪种方式进行切换。
示例:https://jsfiddle.net/cxcawkyk/1/
。
使用hide()/ show()更改显示
Javascript:
$("#element_to_hide").hide(); // To hide
$("#element_to_hide").show(); // To show
优点:
- 一直有效。
- 取消隐藏后,它将返回到使用先前的显示值。
- 您将始终知道要切换到哪个状态,因此:
- 如果状态很重要,则无需在更改状态之前添加if语句来检查可见性。
- 如果状态很重要,则不会混淆其他人阅读您的代码时所切换到的状态。
- 直观。
缺点:
- 如果要模仿切换,则必须先检查状态,然后再切换到其他状态。这些可以使用toggle()代替。请参考示例的p2。
示例:https://jsfiddle.net/k0ukhmfL/
。
总的来说,除非您特别需要将它用作切换,否则我最好说是hide()/ show()。我希望您发现此信息对您有所帮助。
只需为所有元素自己创建隐藏和显示方法,如下所示
Element.prototype.hide = function() {
this.style.display = 'none';
}
Element.prototype.show = function() {
this.style.display = '';
}
之后,您可以将这些方法与通常的元素标识符一起使用,如以下示例所示:
document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();
要么:
<img src="removeME.png" onclick="this.hide()">
我推荐Javascript,因为它相对较快且更具延展性。
<script>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>
如果您在表中使用它,请使用以下命令:-
<script type="text/javascript">
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'table-row';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>
Vanilla JS用于类和ID
按编号
document.querySelector('#element-id').style.display = 'none';
按类别(单个元素)
document.querySelector('.element-class-name').style.display = 'none';
按类别(多个元素)
for (let elem of document.querySelectorAll('.element-class-name')) {
elem.style.display = 'none';
}
文章标签:javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!