Jak mogę ukryć link „Edytuj” po jego naciśnięciu? a także czy mogę ukryć tekst „lorem ipsum” po naciśnięciu przycisku Edytuj?

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

Możesz także użyć tego kodu, aby pokazać / ukryć elementy:

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

Uwaga Różnica między style.visibilityistyle.display polega na korzystaniu z widoczności: ukryty w przeciwieństwie do display: none, tag nie jest widoczny, ale na stronie jest dla niego przydzielone miejsce. Tag jest renderowany, po prostu nie jest widoczny na stronie.

Zobacz ten link, aby zobaczyć różnice.

Chciałbym zasugerować opcję JQuery .

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

Na przykład:

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

Sugerowałbym to, aby ukryć elementy (jak sugerowali inni):

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

Ale aby elementy były widoczne, sugerowałbym to (zamiast display = 'block'):

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

Powodem jest to, że użycie display = 'block' powoduje dodatkowy margines / białe znaki obok elementu, który jest widoczny zarówno w IE (11), jak i Chrome (wersja 43.0.2357.130 m) na stronie, nad którą pracuję.

Kiedy po raz pierwszy wczytasz stronę w Chrome, element bez atrybutu stylu pojawi się w Inspektorze DOM w następujący sposób:

element.style {
}

Ukrywanie go za pomocą standardowego JavaScript sprawia, że ​​jest to zgodnie z oczekiwaniami:

element.style {
  display: none;
}

Ponowne wyświetlenie go za pomocą display = 'block' zmienia to na:

element.style {
  display: block;
}

Co nie jest tym samym, co pierwotnie było. W większości przypadków może to nie mieć znaczenia. Ale w niektórych przypadkach wprowadza nieprawidłowości.

Użycie display = '' przywraca go do oryginalnego stanu w inspektorze DOM, więc wydaje się, że jest to lepsze podejście.

możesz użyć ukrytej właściwości elementu:

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

Powinieneś pomyśleć o JS dla zachowania, a CSS dla wizualnego cukierka w jak największym stopniu. Zmieniając nieco 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>

Będziesz mógł przełączać się z jednego widoku do drugiego, po prostu używając reguł CSS:

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

I kod JS, który przełącza się między dwiema klasami

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

Chociaż na to pytanie udzielano odpowiedzi już wiele razy, pomyślałem, że dodam do niego bardziej kompletną i rzetelną odpowiedź dla przyszłych użytkowników. Główna odpowiedź rozwiązuje problem, ale uważam, że lepiej poznać / zrozumieć niektóre z różnych sposobów pokazywania / ukrywania rzeczy.

.

Zmiana wyświetlania za pomocą css ()

Tak to robiłem, dopóki nie znalazłem innych sposobów.

JavaScript:

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

Plusy:

• Ukrywa i odkrywa. O to chodzi.

Cons:

• Jeśli użyjesz atrybutu „display” do czegoś innego, będziesz musiał zakodować wartość tego, co było przed ukryciem. Więc jeśli miałeś „inline”, musiałbyś to zrobić, w $("#element_to_hid").css("display", "inline");przeciwnym razie domyślnie powróci do „block” lub cokolwiek innego, w co zostanie zmuszony.
• Nadaje się do literówek.

Przykład: https://jsfiddle.net/4chd6e5r/1/

.

Zmiana wyświetlania za pomocą addClass () / removeClass ()

Przygotowując przykład dla tego, faktycznie natknąłem się na pewne wady tej metody, które powodują, że jest ona bardzo zawodna.

Css / JavaScript:

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

Plusy:

• Ukrywa się… czasami. Zobacz p1 na przykładzie.
• Po odkryciu powróci do korzystania z poprzedniej wyświetlanej wartości ... czasami. Zobacz p1 na przykładzie.
• Jeśli chcesz złapać wszystkie ukryte przedmioty, po prostu musisz to zrobić $(".hidden").

Cons:

• Nie ukrywa się, jeśli wartość wyświetlana została ustawiona bezpośrednio w html. Zobacz p2 na przykładzie.
• Nie ukrywa się, jeśli wyświetlanie jest ustawione w javascript za pomocą css (). Zobacz p3 na przykładzie.
• Nieco więcej kodu, ponieważ musisz zdefiniować atrybut css.

Przykład: https://jsfiddle.net/476oha8t/8/

.

Zmiana wyświetlania za pomocą przełącznika ()

JavaScript:

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

Plusy:

• Zawsze działa.
• Pozwala nie martwić się o to, jaki był stan przed zmianą. Oczywistym zastosowaniem tego jest przycisk przełączania ....
• Krótkie i proste.

Cons:

• Jeśli chcesz wiedzieć, w który stan się przełącza, aby zrobić coś niezwiązanego bezpośrednio, musisz dodać więcej kodu (instrukcja if), aby dowiedzieć się, w jakim jest stanie.
• Podobnie jak w poprzednim przypadku, jeśli chcesz uruchomić zestaw instrukcji, które zawierają toggle () w celu ukrycia, ale nie wiesz, czy jest już ukryty, musisz dodać czek (instrukcja if) aby dowiedzieć się najpierw, a jeśli jest już ukryty, pomiń. Zobacz p1 przykładu.
• Powiązane z poprzednimi 2 minusami, używanie toggle () do czegoś, co szczególnie ukrywa lub pokazuje, może być mylące dla innych czytających twój kod, ponieważ nie wiedzą, w jaki sposób będą się przełączać.

Przykład: https://jsfiddle.net/cxcawkyk/1/

.

Zmiana wyświetlania za pomocą hide () / show ()

JavaScript:

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

Plusy:

• Zawsze działa.
• Po odkryciu powróci do używania poprzedniej wyświetlanej wartości.
• Zawsze będziesz wiedział, w którym stanie się zamieniasz, więc:
  1. nie trzeba dodawać instrukcji if, aby sprawdzić widoczność przed zmianą stanów, jeśli stan ma znaczenie.
  2. nie będzie mylić innych czytających Twój kod z tym, do którego stanu się przełączasz, jeśli, jeśli stan ma znaczenie.
• Intuicyjny.

Cons:

• Jeśli chcesz naśladować przełącznik, najpierw musisz sprawdzić stan, a następnie przejść do innego stanu. Zamiast tego użyj do tego przełącznika (). Zobacz p2 przykładu.

Przykład: https://jsfiddle.net/k0ukhmfL/

.

Ogólnie rzecz biorąc, powiedziałbym, że najlepszym rozwiązaniem jest hide () / show (), chyba że jest to specjalnie potrzebne. Mam nadzieję, że te informacje okazały się pomocne.

Po prostu utwórz metody ukrywania i pokazywania dla wszystkich elementów w następujący sposób

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

Następnie możesz użyć metod ze zwykłymi identyfikatorami elementów, jak w poniższych przykładach:

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

lub:

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

Polecam Javascript, ponieważ jest stosunkowo szybki i bardziej plastyczny.

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

Jeśli używasz go w tabeli, użyj tego: -

  <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 dla klas i dokumentów tożsamości

Według ID

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

Według klasy (pojedynczy element)

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

Według klasy (wiele elementów)

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