Скрыть/показать элемент JavaScript

Как я могу скрыть "Редактировать" -link после нажатия на него? а также можно ли скрыть текст "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>

Ответы

Ответ 1

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>

Ответ 2

Вы также можете использовать этот код для отображения/скрытия элементов:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

Примечание Разница между style.visibility и style.display равна при использовании видимости: скрытый в отличие от дисплея: нет, тег не отображается, но для него выделяется пространство на странице. Тег отображается, он просто не отображается на странице.

См. ссылку , чтобы увидеть различия.

Ответ 3

Я хотел бы предложить вам опцию JQuery.

$("#item").toggle();
$("#item").hide();
$("#item").show();

Например:

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

Ответ 4

Я бы предложил это скрыть элементы (как предложили другие):

document.getElementById(id).style.display = 'none';

Но чтобы сделать элементы видимыми, я бы предложил это (вместо display = 'block'):

document.getElementById(id).style.display = '';

Причина в том, что использование display = 'block' вызывает дополнительное поле margin/whitespace рядом с элементом, который становится видимым как в 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, поэтому кажется, что это лучший подход.

Ответ 5

вы можете использовать скрытое свойство элемента:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

Ответ 6

Вы должны думать о 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>

Ответ 7

Несмотря на то, что этот вопрос был дан много ответов ранее, я думал, что добавлю к нему более полный и надежный ответ для будущих пользователей. Основной ответ решает проблему, но я считаю, что лучше понять/понять некоторые из различных способов показать/скрыть вещи.

.

Изменение отображения с помощью 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 на примере.
  • Не скрывает, если дисплей установлен в javascript, используя css(). См. P3 на примере.
  • Чуть больше кода, потому что вам нужно определить атрибут css.

Пример: https://jsfiddle.net/476oha8t/8/

.

Изменение дисплея с помощью переключателя()

JavaScript:

$("element_to_hide").toggle();  // To hide and to unhide

Плюсы:

  • Всегда работает.
  • Позволяет вам не беспокоиться о том, какое состояние было до переключения. Очевидное использование для этого - для кнопки... toggle.
  • Короче и просто.

Минусы:

  • Если вам нужно знать, к какому состоянию оно переключается, чтобы сделать что-то, не связанное напрямую, вам нужно будет добавить еще код (оператор if), чтобы узнать, в каком состоянии оно находится.
  • Как и предыдущий con, если вы хотите запустить набор инструкций, которые содержат toggle() для скрытия, но вы не знаете, если он уже скрыт, вам нужно добавить чек ( if), чтобы узнать сначала, и если он уже скрыт, пропустите. Обратитесь к p1 примера.
  • Что касается предыдущих двух минусов, использование toggle() для чего-то, что конкретно скрывается или конкретно отображается, может смущать других, читающих ваш код, поскольку они не знают, к какому пути они будут переключаться.

Пример: https://jsfiddle.net/cxcawkyk/1/

.

Изменение отображения с помощью функции hide()/show()

JavaScript:

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

Плюсы:

  • Всегда работает.
  • После того, как он появится, он вернется к использованию предыдущего отображаемого значения.
  • Вы всегда будете знать, в каком состоянии вы меняете, чтобы вы:
    • не нужно добавлять операторы для проверки видимости перед изменением состояний, если состояние имеет значение.
    • не будет путать других, читающих ваш код, о том, к какому состоянию вы переключаетесь, если, если состояние имеет значение.
  • Интуитивно.

Минусы:

  • Если вы хотите подражать переключателю, вам нужно сначала проверить состояние, а затем переключиться на другое состояние. Вместо них используйте toggle(). Обратитесь к p2 примера.

Пример: https://jsfiddle.net/k0ukhmfL/

.

В целом, я бы сказал, что лучше всего быть hide()/show(), если вам не нужно, чтобы это было переключением. Надеюсь, вы нашли эту информацию полезной.

Ответ 8

Просто создайте методы 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()">

Ответ 9

Я рекомендую 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>

Ответ 10

Если вы используете его в таблице, используйте это: -

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