'Düzenle' bağlantısını bastıktan sonra nasıl gizleyebilirim? ayrıca düzenle tuşuna bastığımda "lorem ipsum" metnini de gizleyebilir miyim?

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

Bu kodu, öğeleri göstermek / gizlemek için de kullanabilirsiniz:

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

Not Görünürlük kullanılırken style.visibilityve style.displaykullanılırken arasındaki fark : display'in aksine gizli: yok, etiket görünmüyor, ancak sayfa için yer ayrılıyor. Etiket oluşturulur, sayfada görünmez.

Farklılıkları görmek için bu bağlantıya bakın.

Size JQuery seçeneğini önermek istiyorum .

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

Örneğin:

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

Ben (diğerleri önerdiği gibi) öğeleri gizlemek için bu öneriyoruz:

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

Ancak öğeleri görünür hale getirmek için şunu öneririm (display = 'block' yerine):

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

Bunun nedeni, display = 'block' komutunun kullanılması üzerinde çalıştığım sayfada hem IE (11) hem de Chrome'da (Sürüm 43.0.2357.130 m) görünür hale getirilen öğenin yanında ek kenar boşluğuna / boşluğa neden olmasıdır.

Chrome'a ​​bir sayfa ilk kez yüklediğinizde, DOM denetçisinde stil özelliği olmayan bir öğe şu şekilde görünür:

element.style {
}

Standart JavaScript kullanarak gizlenmesi, bunu beklendiği gibi yapar:

element.style {
  display: none;
}

Display = 'block' kullanarak tekrar görünür hale getirmek bunu şu şekilde değiştirir:

element.style {
  display: block;
}

Bu aslında olduğu gibi değil. Bu, vakaların çoğunda herhangi bir fark yaratmayabilir. Ancak bazı durumlarda anormallikler ortaya çıkarır.

Display = '' kullanmak onu DOM denetçisindeki orijinal durumuna geri döndürür, bu nedenle daha iyi bir yaklaşım gibi görünür.

elementin gizli özelliğini kullanabilirsiniz:

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

Davranış için JS'yi ve görsel şekerleme için CSS'yi olabildiğince düşünmelisiniz. HTML'nizi biraz değiştirerek:

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

Sadece CSS kurallarını kullanarak bir görünümden diğerine geçiş yapabilirsiniz:

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

Ve iki sınıf arasında geçiş yapan JS kodu

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

Bu soru daha önce birçok kez cevaplanmış olmasına rağmen, gelecekteki kullanıcılar için daha eksiksiz ve sağlam bir cevapla ekleyeceğimi düşündüm. Ana cevap sorunu çözüyor, ancak bir şeyleri göstermenin / gizlemenin çeşitli yollarını bilmenin / anlamanın daha iyi olabileceğine inanıyorum.

.

Css () kullanarak ekranı değiştirme

Diğer yollardan bazılarını bulana kadar bunu yapardım.

JavaScript:

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

Artıları:

• Gizler ve gizler. Bu kadar.

Eksileri:

• "Display" niteliğini başka bir şey için kullanırsanız, gizlenmeden önceki değerinin değerini kodlamanız gerekir. Eğer "satır içi" olsaydı, bunu yapmak zorunda kalırsın, $("#element_to_hid").css("display", "inline");aksi takdirde varsayılan olarak "bloke" ya da zorlanacak başka bir yere geri dönecektir.
• Kendini yazım hatalarına verir.

Örnek: https://jsfiddle.net/4chd6e5r/1/

.

AddClass () / removeClass () kullanarak görüntüyü değiştirme

Bunun için örnek oluştururken, aslında bu yöntemde çok çok güvenilmez kılan bazı kusurlarla karşılaştım.

Css / JavaScript:

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

Artıları:

• Gizler .... bazen. Örnekteki p1'e bakın.
• Gösterildikten sonra, önceki ekran değerini kullanmaya geri döner .... bazen. Örnekteki p1'e bakın.
• Tüm gizli nesneleri almak istiyorsanız, yapmanız gerekir $(".hidden").

Eksileri:

• Görüntüleme değeri doğrudan html üzerinde ayarlanmışsa gizlenmez. Örnek üzerindeki p2'ye bakın.
• Ekran css () kullanılarak javascript olarak ayarlanmışsa gizlenmez. Örnekteki p3'e bakın.
• Biraz daha fazla kod çünkü bir css niteliği tanımlamanız gerekiyor.

Örnek: https://jsfiddle.net/476oha8t/8/

.

Toggle () kullanarak ekranı değiştirme

JavaScript:

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

Artıları:

• Her zaman çalışır.
• Geçiş yapmadan önce hangi durum hakkında endişelenmenize gerek yok. Bunun bariz kullanımı .... geçiş düğmesi içindir.
• Kısa ve basit.

Eksileri:

• Doğrudan ilişkili olmayan bir şey yapmak için hangi duruma geçtiğini bilmeniz gerekiyorsa, hangi durumda olduğunu bulmak için daha fazla kod (bir if ifadesi) eklemeniz gerekir.
• Önceki con'lara benzer şekilde, gizleme amacıyla toggle () öğesini içeren bir dizi talimat çalıştırmak istiyorsanız, ancak zaten gizli olup olmadığını bilmiyorsanız, bir çek eklemeniz gerekir (bir if ifadesi) Önce ve zaten gizli olup olmadığını öğrenmek için atlayın. Örnekteki p1'e bakın.
• Önceki 2 eksileriyle ilgili olarak, özel olarak gizlenen veya özel olarak gösterilen bir şey için toggle () kullanmak, hangi yolu değiştireceklerini bilmedikleri için kodunuzu okuyan başkalarına kafa karıştırıcı olabilir.

Örnek: https://jsfiddle.net/cxcawkyk/1/

.

Hide () / show () kullanarak ekranı değiştirme

JavaScript:

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

Artıları:

• Her zaman çalışır.
• Gösterildikten sonra, önceki görüntüleme değerini kullanmaya geri döner.
• Hangi durumu değiştirdiğinizi her zaman bileceksiniz, böylece:
  1. eğer durum önemliyse durum değiştirmeden önce görünürlüğü kontrol etmek için if ifadeleri eklemenize gerek yoktur.
  2. durum önemliyse, hangi duruma geçtiğinize ilişkin olarak kodunuzu okuyan başkalarını karıştırmaz.
• Sezgisel.

Eksileri:

• Bir geçişi taklit etmek istiyorsanız, önce durumu kontrol etmeniz ve ardından diğer duruma geçmeniz gerekir. Bunun için toggle () kullanın. Örnekteki p2'ye bakın.

Örnek: https://jsfiddle.net/k0ukhmfL/

.

Genel olarak, özellikle bir geçiş için gerekmedikçe hide () / show () olmak için en iyi söyleyebilirim. Umarım bu bilgiyi faydalı bulmuşsundur.

Sadece aşağıdaki gibi tüm öğeler için kendiniz gizle ve göster yöntemleri oluşturun

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

Bundan sonra, bu örneklerde olduğu gibi yöntemleri normal eleman tanımlayıcılarıyla kullanabilirsiniz:

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

veya:

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

Javascript'i tavsiye ederim, çünkü nispeten hızlı ve daha yumuşak.

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

Bir tabloda kullanıyorsanız bunu kullanın: -

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

Sınıflar ve Kimlikler için Vanilla JS

Kimliğe göre

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

Sınıfa Göre (Tek eleman)

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

Sınıfa Göre (Birden çok öğe)

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