ฉันจะซ่อนลิงค์ 'แก้ไข' หลังจากกดได้อย่างไร และฉันสามารถซ่อนข้อความ "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 m) บนหน้าเว็บที่ฉันกำลังทำงานอยู่

เมื่อคุณโหลดหน้าเว็บครั้งแรกใน 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/

.

การเปลี่ยนการแสดงผลโดยใช้สลับ ()

javascript:

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

ข้อดี:

• ใช้ได้ผลเสมอ
• ช่วยให้คุณไม่ต้องกังวลเกี่ยวกับสถานะก่อนที่จะเปลี่ยน การใช้งานที่ชัดเจนสำหรับสิ่งนี้มีไว้สำหรับปุ่มสลับ ...
• สั้นและง่าย

จุดด้อย:

• หากคุณจำเป็นต้องรู้ว่าสถานะใดที่เปลี่ยนไปเพื่อทำสิ่งที่ไม่เกี่ยวข้องโดยตรงคุณจะต้องเพิ่มรหัสเพิ่มเติม (คำสั่ง if) เพื่อดูว่ามีสถานะใดอยู่
• คล้ายกับข้อผิดพลาดก่อนหน้านี้หากคุณต้องการเรียกใช้ชุดคำสั่งที่มีการสลับ () เพื่อวัตถุประสงค์ในการซ่อน แต่คุณไม่ทราบว่าซ่อนอยู่หรือไม่คุณต้องเพิ่มการตรวจสอบ (คำสั่ง if) เพื่อค้นหาคำตอบก่อนและถ้ามันถูกซ่อนอยู่แล้วให้ข้าม อ้างถึง p1 ของตัวอย่าง
• ที่เกี่ยวข้องกับข้อเสีย 2 ข้อก่อนหน้านี้การใช้ toggle () สำหรับบางสิ่งที่ซ่อนหรือแสดงเฉพาะอาจทำให้ผู้อื่นสับสนในการอ่านรหัสของคุณเนื่องจากพวกเขาไม่รู้ว่าจะสลับกันอย่างไร

ตัวอย่าง: https://jsfiddle.net/cxcawkyk/1/

.

การเปลี่ยนการแสดงผลโดยใช้ hide () / show ()

javascript:

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

ข้อดี:

• ใช้ได้ผลเสมอ
• หลังจากซ่อนตัวมันจะกลับไปใช้ค่าการแสดงผลก่อนหน้า
• คุณจะรู้ได้เสมอว่าคุณกำลังเปลี่ยนสถานะใด:
  1. ไม่จำเป็นต้องเพิ่มถ้าคำสั่งเพื่อตรวจสอบการมองเห็นก่อนเปลี่ยนสถานะหากสถานะมีความสำคัญ
  2. จะไม่สับสนผู้อื่นอ่านรหัสของคุณเป็นสถานะที่คุณสลับไปถ้าหากรัฐสำคัญ
• ที่ใช้งานง่าย

จุดด้อย:

• หากคุณต้องการเลียนแบบสลับคุณจะต้องตรวจสอบสถานะก่อนแล้วจึงเปลี่ยนเป็นสถานะอื่น ใช้สลับ () แทนสิ่งเหล่านี้ อ้างถึง p2 ของตัวอย่าง

ตัวอย่าง: https://jsfiddle.net/k0ukhmfL/

.

โดยรวมแล้วฉันจะบอกว่าวิธีที่ดีที่สุดที่จะซ่อน () / แสดง () เว้นแต่คุณจะต้องการให้สลับเป็นพิเศษ ฉันหวังว่าคุณจะพบว่าข้อมูลนี้มีประโยชน์

เพียงสร้างซ่อนและแสดงวิธีการด้วยตัวคุณเองสำหรับองค์ประกอบทั้งหมดดังต่อไปนี้

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 สำหรับคลาสและรหัส

ตาม ID

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