javascript - 协助使用 Jquery 将一个 div 更改为另一个 div

Question

您好，在我的网站上创建了一本收据，试图使用 J-Query 更改 Div 的内容。

本质上，我想要的是有一个下一个和上一个按钮，可以滚动 receipe1、receipe2 和 receipe3，它们分别是 receipe-img1、2 和 3。同时还显示/隐藏上一个

从下面的人那里得到了一些帮助，但还不够

      <div class="receipe1">
                <h1>Old Fashioned</h1>
                <h4><u>ingredients</u></h4>
                <h2>Serves 1</h2>
                <p>A generous shot of Kentucky straight bourbon<br>
                One shot of rye whiskey preferably Rittenhouse <br>
                Sugar cubes to your taste<br>
                Angostura bitters<br>
                <u>Garnish:</u> Orange twst<br>
      </div>
      <div class="receipe2">
                <h1>Test Receipe2</h1>
                <h4><u>ingredients</u></h4>
                <h2>Serves 1</h2>
                <p>A generous shot of Kentucky straight bourbon<br>
                One shot of rye whiskey preferably Rittenhouse <br>
                Sugar cubes to your taste<br>
                Angostura bitters<br>
                <u>Garnish:</u> Orange twst<br>
      </div>
      <div class="receipe3">
                <h1>Test Receipe3</h1>
                <h4><u>ingredients</u></h4>
                <h2>Serves 1</h2>
                <p>A generous shot of Kentucky straight bourbon<br>
                One shot of rye whiskey preferably Rittenhouse <br>
                Sugar cubes to your taste<br>
                Angostura bitters<br>
                <u>Garnish:</u> Orange twst<br>
      </div>

      .receipe2,
      .receipe-img2,
      .receipe3,
      .receipe-img3 {
      display: none;
      }

      <script>
        $(document).ready(function() {
          $("#changeText").click(function() {
            $(".receipe2").css("display", "block");
            $(".receipe-img2").css("display", "block");
            $(".receipe1").appendTo('.receipe2');
            $(".receipe1").css("display", "none");
            $(".receipe-img1").appendTo('.receipe-img2');
           });
        });
      </script>

Answer 1

如果我理解正确的话，这应该可以。

<script>
  $(document).ready(function() {
    $("#changeText").click(function() {
        $(".receipe2").css("display", "block");
        $(".receipe1").appendTo('.receipe2');
    });
});
</script>