使用J查询将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>

Answer 2

新答案（希望我正确理解您想要什么）

请记住，您可以更改一些小东西，例如隐藏/显示.receipe ，如何.receipe它们等。

我做了下面的例子（它适用于任何数量的食谱）

让我知道是否有帮助

  var nrreceipe = $(".receipe").length; i = 1 $("button").click(function() { var hideme = $(this).siblings("#receipe_wrap").children(".receipe").filter(":visible") if (i < nrreceipe) { if ( $(this).is("#Next")) { $(hideme).hide().animate({left:'-100%'},350); var showme = $(hideme).nextAll(".receipe").filter(":hidden").eq(0) $(showme).show().animate({left:'0%'},350); i++ } } if ( i>1 ){ if ( $(this).is("#Previous")) { $(hideme).hide().animate({left:'-100%'},350); var showme = $(hideme).prevAll(".receipe").filter(":hidden").eq(0) $(showme).show().animate({left:'0%'},350); i-- } } }); 

 .receipe:not(:first-child){ display:none; left:-100%; } .receipe { position:absolute; top:30px; left:0px; padding:0 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="receipe_wrap"> <div class="receipe1 receipe"> <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 receipe"> <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 receipe"> <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> <div class="receipe4 receipe"> <h1>Test Receipe4</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> <button id="Previous">Previous</button> <button id="Next">Next</button>