Question

您好在我的网站上创建了一个recipe图书，尝试使用J-Query更改Div的内容。

基本上我想要的是有一个下一个和上一个按钮，它滚动到receipe1，receipe2和receipe3，它们分别是recipe-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的方式，如何定位等等。

我做了下面的例子（它适用于任意数量的reciepes）

让我知道是否有帮助

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用J查询帮助将div更改为另一个div

2 个答案: