Question

目前,我正在利用超文本、CSS和Javales对我的项目进行脂重心分析。当“More”纽顿被点击和卡片外壳暴露后方时,按预期的算法。同样,点击“Back” but子将卡片回原来的状态。

然而,我正面临一个问题,即点燃在页数后第一个点点“More”纽顿时不会顺利进行。它是部分的,未产生3效应。随后点击了工作罚款,并以适当方式引发 an。

我将我的超文本、中文本安全局和 Java文本列入以下参考:

<div id="meal-card" class="card">
                        <div id="meal-card-front" class="card-front">
                            <div class="inline">
                                <h3 id="meal-name"></h3>
                                <p id="btn-container"><a id="btn-see-more" href="#<strong>More</strong></a></p>
                            </div>
                            <div><img id="meal-image" src=""></div>
                            <h4>Ingredients</h4>
                            <p id="ingredients"></p>
                        </div>
                        <div id="meal-card-back" class="card-back">
                            <div class="inline">
                                <h4>Instructions</h4>
                                <p id="btn-get-back"><a href="#"><strong>Back</strong></a></p>
                            </div>
                            <p id="instructions"></p>
                        </div>

.card {
    perspective: 1000px;
}


.card-front, .card-back{
    background: #fffcec;
    border-radius: 5px;
    text-align: center;
    width: 480px;
    height: 470px;
    padding: 0;
    box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.2);
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.6s;
}
  
.card-back {
    transform: rotateY(180deg);
}
  
/* This class is added to the card when it should flip */
.flipped .card-front{
    transform: rotateY(180deg);
}
  
.flipped .card-back {
    transform: rotateY(0deg);
}

var moreBtn = document.getElementById("btn-see-more");
var backBtn = document.getElementById("btn-get-back");

moreBtn.addEventListener("click", function(){
    mealCard.classList.add("flipped");
    $("#meal-card-back").show();
});

backBtn.addEventListener("click", function(){
    mealCard.classList.remove("flipped");
});

是否有任何人能够就如何确保纸张消im工作顺利进行提出见解或建议,哪怕是在上页后首点击?

任何帮助或指导都将受到高度赞赏。谢谢!

Answer 1

由于你没有将<代码>mealCard列入贵国法律汇编,因此无法确定该编码是什么。我只是试图添加这一条线,并在你的超文本上做一些定点,因为一些标签和报价缺失。这对我来说似乎很不错。

    var mealCard = document.getElementById( meal-card );

var moreBtn = document.getElementById( btn-see-more );
var backBtn = document.getElementById( btn-get-back );
var mealCard = document.getElementById( meal-card );

moreBtn.addEventListener( click , function() {
  mealCard.classList.add( flipped );
});

backBtn.addEventListener( click , function() {
  mealCard.classList.remove( flipped );
});

.card {
  perspective: 1000px;
}

.card-front,
.card-back {
  background: #fffcec;
  border-radius: 5px;
  text-align: center;
  width: 480px;
  height: 470px;
  padding: 0;
  box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.2);
  position: absolute;
  backface-visibility: hidden;
  transition: transform 0.6s;
}

.card-back {
  transform: rotateY(180deg);
}


/* This class is added to the card when it should flip */

.flipped .card-front {
  transform: rotateY(180deg);
}

.flipped .card-back {
  transform: rotateY(0deg);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Home</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <!--
      Need a visual blank slate?
      Remove all code in `styles.css`!
    -->
  <link rel="stylesheet" href="styles.css" />
  <script type="module" src="script.js"></script>
</head>

<body>
  <div id="meal-card" class="card">
    <div id="meal-card-front" class="card-front">
      <div class="inline">
        <h3 id="meal-name"></h3>
        <p id="btn-container">
          <a id="btn-see-more" href="#">
            <strong>More</strong>
          </a>
        </p>
      </div>
      <div>
        <img id=" meal-image " src=" " />
      </div>
      <h4>Ingredients</h4>
      <p id="ingredients "></p>
    </div>
    <div id="meal-card-back" class="card-back">
      <div class="inline">
        <h4>Instructions</h4>
        <p id="btn-get-back">
          <a href="# ">
            <strong>Back</strong>
          </a>
        </p>
      </div>
      <p id="instructions "></p>
    </div>
  </div>
</body>

</html>

Btw I guess this line is redundant since #meal-card-back is already shown?

    $("#meal-card-back").show();

友情链接