Bagaimana saya bisa menyembunyikan tautan 'Edit' setelah saya menekannya? dan juga bisakah saya menyembunyikan teks "lorem ipsum" ketika saya menekan 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>

Anda juga dapat menggunakan kode ini untuk menampilkan / menyembunyikan elemen:

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

Catatan Perbedaan antara style.visibilitydan style.displayketika menggunakan visibilitas: disembunyikan tidak seperti tampilan: tidak ada, tag tidak terlihat, tetapi ruang dialokasikan untuk itu pada halaman. Tag diberikan, itu tidak terlihat di halaman.

Lihat tautan ini untuk melihat perbedaannya.

Saya ingin menyarankan Anda opsi JQuery .

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

Sebagai contoh:

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

Saya menyarankan ini untuk menyembunyikan elemen (seperti yang orang lain sarankan):

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

Tetapi untuk membuat elemen terlihat, saya menyarankan ini (alih-alih display = 'blok'):

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

Alasannya adalah bahwa menggunakan display = 'block' menyebabkan margin / spasi tambahan di sebelah elemen yang terlihat di IE (11) dan Chrome (Versi 43.0.2357.130 m) pada halaman yang sedang saya kerjakan.

Saat Anda pertama kali memuat halaman di Chrome, elemen tanpa atribut style akan muncul seperti ini di inspektur DOM:

element.style {
}

Menyembunyikannya menggunakan JavaScript standar membuatnya seperti ini, seperti yang diharapkan:

element.style {
  display: none;
}

Membuatnya terlihat lagi menggunakan display = 'blok' mengubahnya menjadi ini:

element.style {
  display: block;
}

Yang tidak sama dengan aslinya. Ini bisa sangat tidak membuat perbedaan dalam sebagian besar kasus. Tetapi dalam beberapa kasus, itu memang memperkenalkan kelainan.

Menggunakan display = '' mengembalikannya ke keadaan semula di inspektur DOM, jadi sepertinya pendekatan yang lebih baik.

Anda dapat menggunakan properti elemen yang tersembunyi:

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

Anda harus memikirkan JS untuk perilaku, dan CSS untuk permen visual sebanyak mungkin. Dengan mengubah sedikit HTML Anda:

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

Anda dapat beralih dari satu tampilan ke tampilan lain hanya menggunakan aturan CSS:

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

Dan kode JS yang beralih di antara dua kelas

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

Meskipun pertanyaan ini telah dijawab berkali-kali sebelumnya, saya pikir saya akan menambahkannya dengan jawaban yang lebih lengkap dan solid untuk pengguna masa depan. Jawaban utama memang menyelesaikan masalah, tetapi saya percaya mungkin lebih baik untuk mengetahui / memahami beberapa cara untuk menunjukkan / menyembunyikan sesuatu.

.

Mengubah tampilan menggunakan css ()

Ini adalah cara saya biasa melakukannya sampai saya menemukan beberapa cara lain ini.

Javascript:

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

Pro:

• Menyembunyikan dan menyembunyikan. Itu saja.

Cons:

• Jika Anda menggunakan atribut "display" untuk sesuatu yang lain, Anda harus membuat hardcode nilai dari apa yang sebelumnya disembunyikan. Jadi jika Anda memiliki "inline", Anda harus melakukannya$("#element_to_hid").css("display", "inline"); jika tidak maka default akan kembali ke "block" atau apa pun yang akan dipaksa masuk.
• Cocok untuk kesalahan ketik.

Contoh: https://jsfiddle.net/4chd6e5r/1/

.

Mengubah tampilan menggunakan addClass () / removeClass ()

Saat menyiapkan contoh untuk yang satu ini, saya benar-benar menemui beberapa kekurangan pada metode ini yang membuatnya sangat tidak bisa diandalkan.

Css / Javascript:

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

Pro:

• Menyembunyikan .... terkadang. Lihat p1 pada contoh.
• Setelah unhiding, itu akan kembali menggunakan nilai tampilan sebelumnya .... kadang-kadang. Lihat p1 pada contoh.
• Jika Anda ingin mengambil semua objek tersembunyi, Anda hanya perlu melakukannya $(".hidden").

Cons:

• Tidak menyembunyikan jika nilai tampilan disetel langsung pada html. Lihat p2 pada contoh.
• Tidak menyembunyikan jika tampilan diatur dalam javascript menggunakan css (). Lihat p3 pada contoh.
• Kode sedikit lebih banyak karena Anda harus mendefinisikan atribut css.

Contoh: https://jsfiddle.net/476oha8t/8/

.

Mengubah tampilan menggunakan toggle ()

Javascript:

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

Pro:

• Selalu berhasil.
• Memungkinkan Anda untuk tidak perlu khawatir tentang status sebelum beralih. Penggunaan yang jelas untuk ini adalah untuk .... tombol sakelar.
• Singkat dan sederhana.

Cons:

• Jika Anda perlu tahu negara bagian tempat ia beralih untuk melakukan sesuatu yang tidak terkait langsung, Anda harus menambahkan lebih banyak kode (pernyataan if) untuk mengetahui di negara mana ia berada.
• Mirip dengan con sebelumnya, jika Anda ingin menjalankan satu set instruksi yang berisi toggle () untuk tujuan persembunyian, tetapi Anda tidak tahu apakah itu sudah disembunyikan, Anda harus menambahkan tanda centang (pernyataan if) untuk mencari tahu dulu dan jika sudah disembunyikan, maka lewati. Lihat p1 dari contoh.
• Terkait dengan 2 kontra sebelumnya, menggunakan toggle () untuk sesuatu yang secara khusus bersembunyi atau ditampilkan secara khusus, dapat membingungkan orang lain yang membaca kode Anda karena mereka tidak tahu ke arah mana mereka akan beralih.

Contoh: https://jsfiddle.net/cxcawkyk/1/

.

Mengubah tampilan menggunakan hide () / show ()

Javascript:

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

Pro:

• Selalu berhasil.
• Setelah unhiding, itu akan kembali menggunakan nilai tampilan sebelumnya.
• Anda akan selalu tahu ke negara mana Anda bertukar sehingga Anda:
  1. tidak perlu menambahkan jika pernyataan untuk memeriksa visibilitas sebelum mengubah status jika keadaan penting.
  2. tidak akan membingungkan orang lain yang membaca kode Anda tentang negara bagian tempat Anda beralih jika, jika negara bagian itu penting.
• Intuitif.

Cons:

• Jika Anda ingin meniru toggle, Anda harus memeriksa statusnya terlebih dahulu dan kemudian beralih ke status lainnya. Gunakan toggle () sebagai gantinya untuk ini. Lihat p2 dari contoh.

Contoh: https://jsfiddle.net/k0ukhmfL/

.

Secara keseluruhan, saya akan mengatakan yang terbaik untuk menjadi hide () / show () kecuali Anda secara spesifik membutuhkannya untuk menjadi toggle. Saya harap Anda menemukan informasi ini bermanfaat.

Cukup buat sembunyikan dan tunjukkan metode Anda sendiri untuk semua elemen, sebagai berikut

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

Setelah ini, Anda dapat menggunakan metode dengan pengidentifikasi elemen biasa seperti dalam contoh ini:

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

atau:

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

Saya merekomendasikan Javascript, karena relatif cepat dan lebih lunak.

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

Jika Anda menggunakannya dalam tabel, gunakan ini: -

  <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 untuk Kelas dan ID

Dengan ID

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

Berdasarkan Kelas (elemen tunggal)

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

Menurut Kelas (Banyak elemen)

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