Làm cách nào tôi có thể ẩn liên kết 'Chỉnh sửa' sau khi tôi nhấn nó? và tôi cũng có thể ẩn văn bản "lorem ipsum" khi nhấn chỉnh sửa không?

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

Bạn cũng có thể sử dụng mã này để hiển thị / ẩn các phần tử:

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

Lưu ý Sự khác biệt giữa style.visibilityvà style.displaylà khi sử dụng mức độ hiển thị: ẩn không giống như hiển thị: không có, thẻ không hiển thị, nhưng không gian được phân bổ cho nó trên trang. Thẻ được hiển thị, nó không được nhìn thấy trên trang.

Xem liên kết này để thấy sự khác biệt.

Tôi muốn đề nghị bạn tùy chọn JQuery .

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

Ví dụ:

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

Tôi sẽ đề nghị điều này để ẩn các yếu tố (như những người khác đã đề xuất):

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

Nhưng để hiển thị các phần tử, tôi đề xuất điều này (thay vì display = 'block'):

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

Lý do là việc sử dụng display = 'block' sẽ gây ra lề / khoảng trắng bổ sung bên cạnh phần tử được hiển thị trong cả IE (11) và Chrome (Phiên bản 43.0.2357.130 m) trên trang tôi đang làm việc.

Khi bạn tải trang đầu tiên trong Chrome, một phần tử không có thuộc tính kiểu sẽ xuất hiện như thế này trong trình kiểm tra DOM:

element.style {
}

Ẩn nó bằng cách sử dụng JavaScript tiêu chuẩn làm cho nó như thế này, như mong đợi:

element.style {
  display: none;
}

Làm cho nó hiển thị lại bằng cách sử dụng display = 'block' thay đổi nó thành:

element.style {
  display: block;
}

Mà không giống như ban đầu. Điều này rất có thể không làm cho bất kỳ sự khác biệt trong phần lớn các trường hợp. Nhưng trong một số trường hợp, nó không giới thiệu bất thường.

Sử dụng display = '' sẽ khôi phục nó về trạng thái ban đầu trong trình kiểm tra DOM, vì vậy có vẻ như cách tiếp cận tốt hơn.

bạn có thể sử dụng thuộc tính ẩn của phần tử:

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

Bạn nên nghĩ rằng JS cho hành vi và CSS cho kẹo trực quan càng nhiều càng tốt. Bằng cách thay đổi HTML của bạn một chút:

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

Bạn sẽ có thể chuyển từ chế độ xem này sang chế độ khác bằng cách sử dụng các quy tắc CSS:

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

Và mã JS chuyển đổi giữa hai lớp

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

Mặc dù câu hỏi này đã được trả lời nhiều lần trước đây, tôi nghĩ rằng tôi sẽ thêm vào nó với một câu trả lời đầy đủ và chắc chắn hơn cho người dùng trong tương lai. Câu trả lời chính không giải quyết được vấn đề, nhưng tôi tin rằng có thể tốt hơn để biết / hiểu một số cách khác nhau để hiển thị / ẩn mọi thứ.

.

Thay đổi hiển thị bằng css ()

Đây là cách tôi đã từng làm cho đến khi tôi tìm thấy một số cách khác.

Javascript:

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

Ưu điểm:

• Ẩn và không che giấu. Đó là về nó.

Nhược điểm:

• Nếu bạn sử dụng thuộc tính "hiển thị" cho mục đích khác, bạn sẽ phải mã hóa giá trị của giá trị trước khi ẩn. Vì vậy, nếu bạn có "nội tuyến", bạn sẽ phải làm $("#element_to_hid").css("display", "inline");nếu không nó sẽ mặc định trở lại "chặn" hoặc bất cứ điều gì khác mà nó sẽ bị ép buộc.
• Cho vay chính tả.

Ví dụ: https://jsfiddle.net/4chd6e5r/1/

.

Thay đổi hiển thị bằng addClass () / removeClass ()

Trong khi thiết lập ví dụ cho cái này, tôi thực sự gặp phải một số sai sót trong phương pháp này khiến nó rất không đáng tin cậy.

Css / Javascript:

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

Ưu điểm:

• Nó giấu .... đôi khi. Tham khảo p1 trên ví dụ.
• Sau khi bỏ ẩn, nó sẽ quay trở lại sử dụng giá trị hiển thị trước đó .... đôi khi. Tham khảo p1 trên ví dụ.
• Nếu bạn muốn lấy tất cả các đối tượng ẩn, bạn chỉ cần làm $(".hidden").

Nhược điểm:

• Không ẩn nếu giá trị hiển thị được đặt trực tiếp trên html. Tham khảo p2 trên ví dụ.
• Không ẩn nếu màn hình được đặt trong javascript bằng css (). Tham khảo p3 trên ví dụ.
• Mã nhiều hơn một chút vì bạn phải xác định một thuộc tính css.

Ví dụ: https://jsfiddle.net/476oha8t/8/

.

Thay đổi hiển thị bằng cách sử dụng chuyển đổi ()

Javascript:

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

Ưu điểm:

• Luôn luôn làm việc.
• Cho phép bạn không phải lo lắng về trạng thái trước khi chuyển đổi. Việc sử dụng rõ ràng cho việc này là cho một nút .... chuyển đổi.
• Ngắn gọn và đơn giản.

Nhược điểm:

• Nếu bạn cần biết nó đang chuyển sang trạng thái nào để làm điều gì đó không liên quan trực tiếp, bạn sẽ phải thêm nhiều mã (một câu lệnh if) để tìm hiểu trạng thái của nó.
• Tương tự như con lừa trước, nếu bạn muốn chạy một bộ hướng dẫn có chứa nút chuyển đổi () cho mục đích ẩn, nhưng bạn không biết nếu nó đã bị ẩn, bạn phải thêm một kiểm tra (một câu lệnh if) để tìm hiểu đầu tiên và nếu nó đã bị ẩn, sau đó bỏ qua. Tham khảo p1 của ví dụ.
• Liên quan đến 2 nhược điểm trước đó, sử dụng toggle () cho thứ gì đó được ẩn hoặc hiển thị cụ thể, có thể gây nhầm lẫn cho người khác đọc mã của bạn vì họ không biết họ sẽ chuyển đổi theo cách nào.

Ví dụ: https://jsfiddle.net/cxcawkyk/1/

.

Thay đổi hiển thị bằng cách sử dụng ẩn () / show ()

Javascript:

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

Ưu điểm:

• Luôn luôn làm việc.
• Sau khi bỏ ẩn, nó sẽ quay trở lại sử dụng giá trị hiển thị trước đó.
• Bạn sẽ luôn biết bạn đang hoán đổi trạng thái nào để bạn:
  1. không cần thêm nếu câu lệnh để kiểm tra mức độ hiển thị trước khi thay đổi trạng thái nếu trạng thái có vấn đề.
  2. sẽ không gây nhầm lẫn cho người khác đọc mã của bạn về trạng thái mà bạn đang chuyển sang nếu, nếu trạng thái đó quan trọng.
• Trực giác.

Nhược điểm:

• Nếu bạn muốn bắt chước một chuyển đổi, bạn sẽ phải kiểm tra trạng thái trước và sau đó chuyển sang trạng thái khác. Sử dụng chuyển đổi () thay vì cho những điều này. Tham khảo p2 của ví dụ.

Ví dụ: https://jsfiddle.net/k0ukhmfL/

.

Nhìn chung, tôi sẽ nói tốt nhất là ẩn () / show () trừ khi bạn đặc biệt cần nó để chuyển đổi. Tôi hy vọng bạn tìm thấy thông tin này là hữu ích.

Chỉ cần tạo ẩn và hiển thị phương thức cho tất cả các yếu tố, như sau

Element.prototype.hide = function() {
    this.style.display = 'none';
}
Element.prototype.show = function() {
    this.style.display = '';
}

Sau này, bạn có thể sử dụng các phương thức với các định danh phần tử thông thường như trong các ví dụ sau:

document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();

hoặc là:

<img src="removeME.png" onclick="this.hide()">

Tôi khuyên dùng Javascript, vì nó tương đối nhanh và dễ uốn hơn.

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

Nếu bạn đang sử dụng nó trong bảng, hãy sử dụng: -

  <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 cho các lớp và ID

Bằng ID

document.querySelector('#element-id').style.display = 'none';

Theo lớp (Phần tử đơn)

document.querySelector('.element-class-name').style.display = 'none';

Theo lớp (Nhiều yếu tố)

for (let elem of document.querySelectorAll('.element-class-name')) {
    elem.style.display = 'none';
}