Bagaimana saya bisa menyembunyikan 'Edit'-link setelah saya tekan itu? dan juga saya bisa menyembunyikan "lorem ipsum" teks ketika saya tekan edit?
``html
<script type="text/javascript"> fungsi showStuff(id) { dokumen.getElementById(id).gaya.display = 'blok'; } </script>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
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>
Anda juga dapat menggunakan kode ini untuk menampilkan/menyembunyikan unsur-unsur:
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";
Catatan perbedaan antara gaya.visibilitas
dan gaya.display
adalah
ketika menggunakan visibility:hidden tidak seperti display:none, tag tidak terlihat, tapi ruang yang dialokasikan untuk itu pada halaman. Tag ini diberikan, itu hanya isn't dilihat di halaman.
Melihat ini link untuk melihat perbedaan.
Saya akan menyarankan ini untuk menyembunyikan elemen (seperti orang lain telah disarankan):
document.getElementById(id).style.display = 'none';
Tetapi untuk membuat unsur-unsur yang terlihat, aku'd sarankan ini (bukan display = 'blok'):
document.getElementById(id).style.display = '';
Alasannya adalah bahwa menggunakan display = 'blok' yang menyebabkan tambahan margin/spasi di samping elemen yang dibuat terlihat di kedua IE (11) dan Chrome (Versi 43.0.2357.130 m) pada halaman I'm bekerja pada.
Ketika anda pertama kali memuat halaman di Chrome, elemen tanpa atribut style akan muncul seperti ini di masa DOM inspector:
element.style {
}
Bersembunyi dengan menggunakan JavaScript standar membuat hal ini, seperti yang diharapkan:
element.style {
display: none;
}
Sehingga terlihat lagi menggunakan display = 'blok' perubahan ini:
element.style {
display: block;
}
Yang tidak sama seperti awalnya. Ini bisa sangat baik tidak membuat perbedaan dalam sebagian besar kasus. Namun dalam beberapa kasus, itu tidak memperkenalkan kelainan.
Menggunakan display = '' tidak mengembalikannya ke keadaan semula dalam DOM inspector, sehingga tampaknya seperti pendekatan yang lebih baik.
Anda harus berpikir JS untuk perilaku, dan CSS untuk visual permen sebanyak mungkin. Dengan mengubah HTML anda sedikit :
<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'akan dapat beralih dari satu tampilan ke yang lain hanya dengan 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 sudah dijawab berkali-kali sebelumnya, saya pikir saya akan menambahkan untuk itu dengan lebih lengkap dan padat menjawab untuk pengguna di masa depan. Jawaban utama tidak memecahkan masalah, tetapi saya percaya itu mungkin lebih baik untuk mengetahui/memahami beberapa macam cara untuk menampilkan/menyembunyikan sesuatu.
.
Ini adalah cara saya digunakan untuk melakukan hal itu sampai saya menemukan beberapa cara lain.
Javascript:
$("#element_to_hide").css("display", "none"); // To hide
$("#element_to_hide").css("display", ""); // To unhide
Pro:
Cons:
$("#element_to_hid").css("display", "inline");
jika tidak itu akan menjadi default kembali ke "blok" atau apapun yang lain yang itu akan dipaksa ke dalam.Contoh:
.
Saat menyiapkan contoh untuk yang satu ini, saya benar-benar berlari ke dalam beberapa kelemahan pada metode ini yang membuatnya sangat sangat bisa diandalkan.
Css/Javascript:
.hidden {display:none}
$("#element_to_hide").addClass("hidden"); // To hide
$("#element_to_hide").removeClass("hidden"); // To unhide
Pro:
$(".tersembunyi")
.Cons:
Contoh: https://jsfiddle.net/476oha8t/8/
.
Javascript:
$("element_to_hide").toggle(); // To hide and to unhide
Pro:
Cons:
Contoh: https://jsfiddle.net/cxcawkyk/1/
.
Javascript:
$("#element_to_hide").hide(); // To hide
$("#element_to_hide").show(); // To show
Pro:
Cons:
Contoh: https://jsfiddle.net/k0ukhmfL/
.
Secara keseluruhan, saya akan mengatakan yang terbaik untuk menyembunyikan()/show() kecuali anda secara khusus perlu untuk menjadi beralih. Saya harap anda menemukan informasi ini dapat membantu.
Hanya buat menyembunyikan dan menampilkan metode-metode sendiri untuk semua unsur-unsur, sebagai berikut
Element.prototype.hide = function() {
this.style.display = 'none';
}
Element.prototype.show = function() {
this.style.display = '';
}
Setelah ini, anda dapat menggunakan metode yang biasa elemen pengenal seperti pada contoh berikut:
document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();
atau:
<img src="removeME.png" onclick="this.hide()">
Saya merekomendasikan Javascript, karena ukurannya yang relatif cepat dan lebih mudah dibentuk.
<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 menggunakan ini dalam meja 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>