Question

目前我有两个div翻转两个独立的功能，如下所示：

<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>

然后是我的功能：

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)";
    }
}

现在。我想将两个javascript函数合二为一。这有助于我简化代码。以下是我的代码的链接：https://secure.scheduleinterpreter.com/bestinterpreters/wip/dashboard/ada/Dashboard/dashboard.003.html

另一个问题：如何设置屏幕的最小宽度以锁定div的大小并开始将它们堆叠在一起？

Answer 1

您是否尝试将DIV的ID作为参数传递？

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)";
  }
}

用一个JS函数单独翻转两个Div

1 个答案: