В JavaScript Скрыть/показать элемент
Как я могу скрыть ссылку "Редактировать" после ее нажатия? а также могу ли я Скрыть текст "lorem ipsum" при нажатии edit?
<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>
10 ответов
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";
Примечание разницу между style.visibility
и style.display
is
при использовании visibility: hidden в отличие от display: none тег не отображается, но для него выделяется место на странице. Тег отображается, его просто не видно на странице.
посмотреть этот ссылке чтобы увидеть различия.
Я хотел бы предложить вам в 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, поэтому кажется, что лучший подход.
вы должны думать 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" для чего-то еще, вам придется жестко закодировать значение того, что было до скрытия. Поэтому, если у вас есть "inline", вам придется сделать
$("#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 в Примере.
- после unhiding, он вернется к использованию предыдущего отображаемого значения....иногда. См. p1 в Примере.
- если вы хотите, чтобы захватить все скрытые объекты, вам просто нужно сделать
$(".hidden")
.
плюсы:
- не скрывает, если отображаемое значение было установлено непосредственно на html. См. p2 в Примере.
- не скрывает, если дисплей установлен в javascript с помощью css (). Ссылка на Р3 на примере.
- немного больше кода потому что вы должны определить атрибут CSS.
пример:https://jsfiddle.net/476oha8t/8/
.
изменение дисплея с помощью toggle ()
Javascript:
$("element_to_hide").toggle(); // To hide and to unhide
плюсы:
- всегда работает.
- позволяет вам не беспокоиться о том, какое состояние было до переключения. Очевидная польза для это для....выключатель.
- короткое и простой.
плюсы:
- Если вам нужно знать, в какое состояние он переключается, чтобы сделать что-то не связанное напрямую, вам нужно будет добавить больше кода (оператор if), чтобы узнать, в каком состоянии он находится.
- подобно предыдущему con, если вы хотите запустить набор инструкций, содержащий 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/
.
в целом, я бы сказал, что лучше будет Скрыть()/показать() если вам конкретно нужен переключатель. Надеюсь, вы нашли эту информацию полезной.
вы можете использовать скрытое свойство элемента:
document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false
просто создайте методы 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>