Flip zwei Divs separat mit einem JS Funktion

Question

Derzeit habe ich zwei divs mit zwei getrennten Funktionen wie gezeigt Spiegeln:

<div class="flip-container" id="flip-container"> 
    <div class="flipper" id="flipper"> 
     <div class="front" id="front"> 
      <p> 
       Paragraph 1 
      </p> 
      <p> 
       Paragraph 2 
      </p></br> 
      <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper()">&#xf112;</span> 
     </div> 
     <div class="back" id="back"> 
      <p> 
       Paragraph 1 
      </p> 
      <p> 
       Paragraph 2 
      </p> 
      <p> 
       Paragraph 3 
      </p></br> 
      <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper()">&#xf112;</span> 
     </div> 
    </div> 
</div> 
<div class="flip-container" id="flip-container"> 
    <div class="flipper" id="flipper2"> 
     <div class="front" id="front"> 
      <p> 
       Paragraph 1 
      </p> 
      <p> 
       Paragraph 2 
      </p> 
      <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper2()">&#xf112;</span> 
     </div> 
     <div class="back" id="back"> 

      <p> 
       Paragraph 1 
      </p> 
      <p> 
       Paragraph 2 
      </p> 
      <p> 
       Paragraph 3 
      </p> 
      <span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onClick="flipper2()">&#xf112;</span> 
     </div> 
    </div> 
</div> 

hier sind dann meine Funktionen:

function flipper(){ 
    if(document.getElementById("flipper").style.transform == "rotateY(180deg)"){ 
     document.getElementById("flipper").style.transform = "rotateY(0deg)"; 
    }else{ 
     document.getElementById("flipper").style.transform = "rotateY(180deg)"; 
    } 
} 
function flipper2(){ 
    if(document.getElementById("flipper2").style.transform == "rotateY(180deg)"){ 
     document.getElementById("flipper2").style.transform = "rotateY(0deg)"; 
    }else{ 
     document.getElementById("flipper2").style.transform = "rotateY(180deg)"; 
    } 
} 

Jetzt. Ich möchte die beiden Javascript-Funktionen zu einem kombinieren. Dies wird mir helfen, meinen Code zu vereinfachen. Hier ist ein Link zu meinem Code: https://secure.scheduleinterpreter.com/bestinterpreters/wip/dashboard/ada/Dashboard/dashboard.003.html

Eine andere Frage: Wie richte ich eine minimale Breite für den Bildschirm, um die Größe von divs zu sperren und beginnen, sie übereinander zu stapeln?

Answer 1

Haben Sie versucht, die ID des DIV als Argument zu übergeben?

function flipper(divId){ 
    if(document.getElementById(divId).style.transform == "rotateY(180deg)") { 
    document.getElementById(divId).style.transform = "rotateY(0deg)"; 
    } else { 
    document.getElementById(divId).style.transform = "rotateY(180deg)"; 
    } 
}