Élément JavaScript hide/show

Question

Comment puis-je masquer le lien "Editer" après avoir appuyé dessus ? Et puis-je aussi masquer le texte "lorem ipsum" lorsque j'appuie sur 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>

Answer 1

Vanilla JS pour les classes et les ID

Par ID

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

Par classe (élément unique)

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

Par classe (éléments multiples)

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

Answer 2

Bien que cette question ait déjà reçu de nombreuses réponses, j'ai pensé y ajouter une réponse plus complète et plus solide pour les futurs utilisateurs. La réponse principale résout le problème, mais je pense qu'il est préférable de connaître/comprendre les différentes façons d'afficher/cacher les choses.

.

Changer l'affichage en utilisant css()

C'est comme ça que je faisais jusqu'à ce que je trouve d'autres méthodes.

Javascript :

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

Pour :

• Cache et décachette. C'est à peu près tout.

Cons :

• Si vous utilisez l'attribut "display" pour autre chose, vous devrez coder en dur la valeur de ce qu'il était avant le masquage. Ainsi, si vous aviez "inline", vous devriez faire ce qui suit $("#element_to_hid").css("display", "inline"); sinon, il reviendra par défaut à "block" ou à toute autre option qui lui sera imposée.
• Se prête aux erreurs de frappe.

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

.

Modification de l'affichage à l'aide de addClass()/removeClass()

En préparant l'exemple de cette méthode, j'ai rencontré certains défauts qui la rendent très peu fiable.

Css/Javascript :

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

Pour :

• Il cache parfois..... Reportez-vous à la page 1 de l'exemple.
• Après le démasquage, la valeur d'affichage précédente.... sera parfois utilisée à nouveau. Reportez-vous à la page 1 de l'exemple.
• Si vous voulez attraper tous les objets cachés, il vous suffit de faire $(".hidden") .

Cons :

• Ne cache pas si la valeur d'affichage a été définie directement sur le html. Voir la page 2 de l'exemple.
• Ne se cache pas si l'affichage est défini en javascript à l'aide de css(). Reportez-vous à la page 3 de l'exemple.
• Un peu plus de code car il faut définir un attribut css.

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

.

Changer l'affichage en utilisant toggle()

Javascript :

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

Pour :

• Ça marche toujours.
• Cela vous permet de ne pas avoir à vous soucier de l'état dans lequel il se trouvait avant le changement. L'utilisation la plus évidente est celle d'un bouton....toggle.
• Court et simple.

Cons :

• Si vous avez besoin de savoir dans quel état il passe pour faire quelque chose qui n'est pas directement lié, vous devrez ajouter du code (une instruction if) pour savoir dans quel état il se trouve.
• Comme dans l'exemple précédent, si vous voulez exécuter un jeu d'instructions qui contient la fonction toggle() dans le but de cacher, mais que vous ne savez pas si elle est déjà cachée, vous devez ajouter une vérification (une instruction if) pour le savoir d'abord et si elle est déjà cachée, alors passez. Reportez-vous à la page 1 de l'exemple.
• En rapport avec les deux inconvénients précédents, l'utilisation de toggle() pour quelque chose qui est spécifiquement caché ou spécifiquement montré, peut être source de confusion pour les autres personnes qui lisent votre code, car elles ne savent pas de quelle manière elles vont basculer.

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

.

Modification de l'affichage à l'aide de hide()/show()

Javascript :

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

Pour :

• Ça marche toujours.
• Après le démasquage, la valeur d'affichage précédente sera à nouveau utilisée.
• Vous saurez toujours vers quel état vous changez :
  1. il n'est pas nécessaire d'ajouter des instructions if pour vérifier la visibilité avant de changer d'état si l'état importe.
  2. n'embrouillera pas les autres lecteurs de votre code quant à l'état dans lequel vous passez si, si l'état importe.
• Intuitif.

Cons :

• Si vous voulez imiter une bascule, vous devrez d'abord vérifier l'état et ensuite passer à l'autre état. Utilisez plutôt toggle() pour cela. Reportez-vous à la page 2 de l'exemple.

Exemple : https://jsfiddle.net/k0ukhmfL/

.

Dans l'ensemble, je dirais que le mieux est de recourir à hide()/show(), sauf si vous avez spécifiquement besoin d'une bascule. J'espère que ces informations vous ont été utiles.

Answer 3

Dans la mesure du possible, pensez JS pour le comportement, et CSS pour le bonbon visuel. En modifiant un peu votre 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>

Vous pourrez passer d'une vue à l'autre en utilisant simplement les règles CSS :

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

Et le code JS qui bascule entre les deux classes

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

Answer 4

Il suffit de créer soi-même des méthodes hide et show pour tous les éléments, comme suit

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

Ensuite, vous pouvez utiliser les méthodes avec les identifiants d'éléments habituels, comme dans les exemples suivants :

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

ou :

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

Answer 5

Si vous l'utilisez dans un tableau utilisez ceci :-

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