Façon de gérer différents ID de superposition : utilisez la même fonction JavaScript

Question

Je souhaite afficher des superpositions pour différents liens. La première superposition contient une image et du texte, tandis que si l'on clique sur le lien 2, elle doit afficher la superposition 2 avec la même structure mais un contenu différent. S'il vous plaît, aidez-moi à obtenir le résultat souhaité.

fonction on() {
  document.getElementById("overlay").style.display = "block";
}

fonction on1() {
  document.getElementById("overlay1").style.display = "block";
}

fonction désactivée() {
  document.getElementById("overlay").style.display = "aucun";
}</pré>
<pre class="brush:css;toolbar:false;">.img {
  transition : transformer les 5 s en une entrée-sortie facile ;
  transformation : échelle(1);
  origine de transformation : 0 0 ;
}

.img: survoler {
  transformation : échelle (1,25)
}

#recouvrir,
#superposition1 {
  poste : fixe ;
  affichage : aucun ;
  largeur : 100 % ;
  hauteur : 100 % ;
  haut : 0 ;
  gauche : 0 ;
  à droite : 0 ;
  bas : 0 ;
  couleur de fond : blanc ;
  indice z : 77777772 ;
  curseur : pointeur ;
}

#texte,
#texte 1 {
  poste : fixe ;
  haut : 20 % ;
  gauche : 5 % ;
  // taille de police : 50 px ;
  la couleur noire;
  // transformation : traduire(-50%,-50%);
  // -ms-transform : traduire (-50%,-50%);
}</pré>
<pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()">
  <div id="text">
    <div style="largeur : 48 %; float:left">
      <h2>XXX</h2>
      <h4>ZZZ</h4>
      <p style="font-size:14px;">
        Faites découvrir les immenses talents des gens qui vivent dans la vallée. </p>
    </div>
    <div style="largeur : 50 %; float:right; margin-top:-220px;
    ">
      <img class="img" style="hauteur:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
    </div>
  </div>
  <div style="padding:20px">
    <h2></h2>
    <a onclick="on()"></a>
  </div>
  <div id="overlay1" onclick="on1()">
    <div id="text1">
      <div style="largeur : 48 %; float:left">
        <h2>AAA</h2>
        <h4>MMM</h4>
        <p style="font-size:14px;">Faites découvrir les immenses talents des habitants de la vallée. </p>
      </div>
      <div style="largeur : 50 %; float:right; margin-top:-220px;
    ">
        <img class="img" style="hauteur:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
      </div>
    </div>
    <div style="padding:20px">
      <h2></h2>
      <a onclick="on1()"></a>
    </div>
  </div>
</div>


<a onclick="on(id)"style="font-size: 11pt;">En savoir plus -></a>
<a onclick="on(id)"style="font-size: 11pt;">En savoir plus -></a>


 1. Liste des éléments

Answer 1

Il existe de meilleures façons de mettre en œuvre cela, mais en fonction de vos besoins, vous pouvez transmettre différents ids和actions作为params à la même fonction, comme ceci

function on() {
  document.getElementById("overlay").style.display = "block";
}

function on1() {
  document.getElementById("overlay1").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

function toggle(id, value) {
  document.getElementById(id).style.display = value;
}

.img {
  transition: transform 5s ease-in-out;
  transform: scale(1);
  transform-origin: 0 0;
}

.img:hover {
  transform: scale(1.25)
}

#overlay,
#overlay1 {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  z-index: 77777772;
  cursor: pointer;
}

#text,
#text1 {
  position: fixed;
  top: 20%;
  left: 5%;
  font-size: 50px;
  color: black;
  transform: translate(-50% -50%);
  -ms-transform: translate(-50% -50%);
}

<div id="overlay" onclick="toggle('overlay', 'none')">
  <div id="text">
    <div style="width: 48%; float:left">
      <h2>XXX</h2>
      <h4>ZZZ</h4>
      <p style="font-size:14px;">
        帮助发掘居住在山谷中的巨大才能。 </p>
    </div>
    <div style="width: 50%; float:right;   margin-top:-220px;
    ">
      <img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
    </div>
  </div>
  <div style="padding:20px">
    <h2></h2>
    <a onclick="toggle('overlay', 'block')"></a>
  </div>
  <div id="overlay1" onclick="toggle('overlay1', 'block')">
    <div id="text1">
      <div style="width: 48%; float:left">
        <h2>AAA</h2>
        <h4>MMM</h4>
        <p style="font-size:14px;">帮助发掘居住在山谷中的巨大才能。 </p>
      </div>
      <div style="width: 50%; float:right;   margin-top:-220px;
    ">
        <img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
      </div>
    </div>
    <div style="padding:20px">
      <h2></h2>
      <a onclick="toggle('overlay1', 'block')"></a>
    </div>
  </div>
</div>


<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">阅读更多 -></a>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">阅读更多 -></a> 1. 列表项