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

Question

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

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

Answer 2

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

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

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

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

Answer 3

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

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

Например:

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

Answer 4

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

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, поэтому этот подход кажется более подходящим.

Answer 5

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

Answer 6

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

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

Answer 7

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

.

Изменение отображения с помощью 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");, иначе он по умолчанию вернется к «block» или к чему-либо еще, к чему он будет принужден.
• Поддается опечаткам.1025 *

  Пример: 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
  

  Плюсы:

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

  Минусы:

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

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

  .

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

  Javascript:

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

  Плюсы:

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

  Минусы:

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

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

  .

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

Answer 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()">

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

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