Cara untuk mengendalikan ID tindanan yang berbeza: gunakan fungsi JavaScript yang sama

Question

Saya mahu menunjukkan tindanan untuk pautan yang berbeza. Tindanan pertama mengandungi imej dan teks, manakala jika kita mengklik pada pautan 2, ia mesti menunjukkan tindanan 2 dengan struktur yang sama tetapi kandungan yang berbeza. Tolong bantu saya untuk mendapatkan output yang diingini.

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

fungsi pada1() {
  document.getElementById("overlay1").style.display = "block";
}

fungsi off() {
  document.getElementById("overlay").style.display = "tiada";
}

.img {
  peralihan: mengubah 5s mudah masuk;
  transform: skala (1);
  transform-asal: 0 0;
}

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

#tindih,
#overlay1 {
  kedudukan: tetap;
  paparan: tiada;
  lebar: 100%;
  ketinggian: 100%;
  atas: 0;
  kiri: 0;
  kanan: 0;
  bawah: 0;
  warna latar belakang: putih;
  indeks z: 77777772;
  kursor: penunjuk;
}

#teks,
#text1 {
  kedudukan: tetap;
  atas: 20%;
  kiri: 5%;
  //saiz fon: 50px;
  warna: hitam;
  // transform: translate(-50%,-50%);
  // -ms-transform: translate(-50%,-50%);
}

  

    

      
XXX
      
ZZZ
      

        Bantu menemui bakat besar orang yang tinggal di lembah. 
    
    

      
    
  
  

    

    
  
  

    

      

        
AAA
        
MMM
        
Bantu menemui bakat besar orang yang tinggal di lembah. 
      
      

        
      
    
    

      

      
    
  



Baca lebih lanjut ->
Baca lebih lanjut ->


 1. Senaraikan item

Answer 1

Terdapat cara yang lebih baik untuk melaksanakan ini, tetapi bergantung pada keperluan anda, anda boleh menghantar berbeza ids和actions作为params ke fungsi yang sama, seperti ini

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. 列表项