0
votes

Utilisez la même fonction plusieurs fois sur différents identifiants dans JavaScript

Je veux appliquer une seule et même fonction plusieurs fois sur une page, à chaque fois aux éléments avec leur propre identifiant (pour afficher et masquer des éléments). Lorsque j'applique la fonction sans spécifier des identifiants, tous les éléments du document changeraient. Ainsi, je dois spécifier la fonction plusieurs fois dans le fichier JavaScript, chacune avec son propre identifiant, ou est-il possible d'obtenir l'identifiant en quelque sorte au moment de l'exécution?

HTML STRY> P>

function switchIt_stahlherstellung() {
  if (document.getElementById('stahlherstellung')) {
      if (document.getElementById('stahlherstellung').style.display == 'none') {
          document.getElementById('stahlherstellung').style.display = 'block';
      }
      else {
          document.getElementById('stahlherstellung').style.display = 'none';
      }
  }
}

function switchIt_produkte() {
      if (document.getElementById('produkte')) {
          if (document.getElementById('produkte').style.display == 'none') {
              document.getElementById('produkte').style.display = 'block';
          }
          else {
              document.getElementById('produkte').style.display = 'none';
          }
      }
    }


2 commentaires

Où mettez-vous tous les fin de fin? Cela peut être un problème


@Misterjojo tu as raison, c'est une erreur dans mon code, je vais le changer


3 Réponses :


3
votes

Vous devez en savoir plus sur les fonctions et spécifiquement paramètres .

Par exemple: xxx

alors vous pouvez appeler cette seule fonction Comme:

Switchit_stahlherstellung ('einheiten_stahlherstellung');

En savoir plus: https://Developer.mozilla.org/en-us/docs/web/javaScript/Guide/functions


2 commentaires

D'accord, merci. Cela me montre la direction pour continuer à regarder.


J'ai par la suite accepté la réponse de Mister Jojo, car elle a donné une solution concrète à mon problème.



3
votes

Solution de mélange CSS / JS simple:

p>

<button class="switcher">switch</button>
<div id="stahlherstellung">
  show/hide stuff  
</div>

<button class="switcher">switch</button>
<div id="produkte">
  show/hide stuff
</div>


3 commentaires

Oui, cela fonctionne et est une solution simple et mince. À Jsfiddle, je peux le reproduire, dans Firefox / Chrome, il est probablement dû à mes paramètres locaux. Par conséquent, j'ai accepté cette réponse.


@Pjoern Je pense que vous devez ajouter un différer sur votre balise de script ou utiliser DomContentOached .or Placez votre script sous l'ensemble du corps HTML (souvent choisi)


Maintenant ça marche. Je mets le script à la fin du corps.



0
votes

Il existe un moyen plus facile de faire votre travail sans toutes ces "ifs" et sans interroger et cartographier tous vos boutons. Dans votre HTML à "OnClick" à l'appel de votre fonction, vous passez en argument l'identifiant de la plongée que vous souhaitez afficher ou masquer. À votre div ajoute deux "classe" une pour gérer l'affichage et l'autre pour styler votre div.

html strong> p> xxx pré>

un peu CSS par exemple. p>

CSS fort> p> xxx pré>

et la fonction. p>

Vous obtenez l'argument transmis à L'appel de la fonction qui vous permet de sélectionner votre DIV par son "ID" et d'ajouter un "toogle" sur la classe masquée. p>

JavaScript strong> p>

function switchIt(id) {
    document.getElementById(id).classList.toggle("hidden");
}


0 commentaires