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

Ви також можете використовувати цей код для показу / приховування елементів:

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

Примітка Різниця між 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 м) на сторінці, над якою я працюю.

Під час першого завантаження сторінки в Chrome, елемент без атрибуту стилю з’явиться таким у інспекторі DOM:

element.style {
}

Приховування його за допомогою стандартного JavaScript робить це, як очікувалося:

element.style {
  display: none;
}

Зробивши його знову видимим за допомогою display = 'block', змінює його на це:

element.style {
  display: block;
}

Що не таке, як було спочатку. В більшості випадків це може не змінити жодних змін. Але в деяких випадках це вводить відхилення.

Використання display = '' повертає його до початкового стану в інспекторі DOM, тому, схоже, кращий підхід.

Ви можете використовувати приховане властивість елемента:

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

Приклад: https://jsfiddle.net/476oha8t/8/

.

Зміна дисплея за допомогою toggle ()

Javascript:

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

Плюси:

• Завжди працює.
• Дозволяє вам не турбуватися про те, у якому стані він був до переключення. Очевидним для цього є кнопка .... перемикання.
• Короткий і простий.

Мінуси:

• Якщо вам потрібно знати, в який стан він переходить, щоб зробити щось, що не пов'язане безпосередньо, вам доведеться додати більше коду (заява if), щоб дізнатися, у якому стані він знаходиться.
• Як і в попередньому підході, якщо ви хочете виконати набір інструкцій, що містить toggle () з метою приховування, але ви не знаєте, чи він уже прихований, вам слід додати чек (заява if) щоб дізнатися спочатку, і якщо це вже приховано, тоді пропустіть. Зверніться до p1 прикладу.
• Що стосується попередніх 2 мінусів, використання toggle () для того, що спеціально приховується або конкретно показує, може бентежити інших, хто читає ваш код, оскільки вони не знають, в який спосіб вони будуть перемикатися.

Приклад: https://jsfiddle.net/cxcawkyk/1/

.

Зміна дисплея за допомогою skriv () / show ()

Javascript:

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

Плюси:

• Завжди працює.
• Після того, як приховати його, він повернеться до використання попереднього значення відображення.
• Ви завжди будете знати, на який стан ви переходите, щоб:
  1. не потрібно додавати, якщо заяви перевіряють видимість перед зміною штатів, якщо стан має значення.
  2. не переплутає інших, хто читає ваш код, у який стан ви переходите, якщо стан має значення.
• Інтуїтивно зрозумілий.

Мінуси:

• Якщо ви хочете імітувати тумблер, вам доведеться спочатку перевірити стан, а потім перейти на інший стан. Замість цього використовуйте toggle (). Зверніться до p2 прикладу.

Приклад: https://jsfiddle.net/k0ukhmfL/

.

В цілому, я б сказав, що найкраще бути сховано () / 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 для класів та посвідчень

За ідентифікатором

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';
}