Möglichkeit zum Umgang mit unterschiedlichen Overlay-IDs: Verwenden Sie dieselbe JavaScript-Funktion

Question

Ich möchte Overlays für verschiedene Links anzeigen. Das erste Overlay enthält Bild und Text. Wenn wir auf Link 2 klicken, muss Overlay 2 mit derselben Struktur, aber unterschiedlichem Inhalt angezeigt werden. Bitte helfen Sie mir, die gewünschte Ausgabe zu erhalten.

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

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

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

.img {
  Übergang: Transformation 5s Easy-in-out;
  transform: Skala(1);
  Transformationsursprung: 0 0;
}

.img:hover {
  transformieren: Skala(1,25)
}

#overlay,
#overlay1 {
  Position: fest;
  Anzeige: keine;
  Breite: 100 %;
  Höhe: 100 %;
  oben: 0;
  links: 0;
  rechts: 0;
  unten: 0;
  Hintergrundfarbe: weiß;
  Z-Index: 77777772;
  Cursor: Zeiger;
}

#Text,
#Text 1 {
  Position: fest;
  Top 20%;
  links: 5 %;
  //Schriftgröße: 50px;
  Farbe: Schwarz;
  // transform: Translate(-50%,-50%);
  // -ms-transform: Translate(-50%,-50%);
}

<div id="overlay" onclick="off()">
  <div id="text">
    <div style="width: 48%; float:left">
      <h2>XXX</h2>
      <h4>ZZZ</h4>
      <p style="font-size:14px;">
        Entdecken Sie mit uns die immensen Talente der Menschen, die im Tal leben. </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="on()"></a>
  </div>
  <div id="overlay1" onclick="on1()">
    <div id="text1">
      <div style="width: 48%; float:left">
        <h2>AAA</h2>
        <h4>MMM</h4>
        <p style="font-size:14px;">Helfen Sie dabei, die immensen Talente der Menschen zu entdecken, die im Tal leben. </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="on1()"></a>
    </div>
  </div>
</div>


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


 1. Elemente auflisten

Answer 1

有更好的方法来实现这个，但根据您的要求，您可以将不同的ids和actions作为params传递给同一个函数，像这样

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