Question

我正在创建一个图库。我想要的行为是当页面加载时，用户将只看到第一个标题。当他们单击下一步时，将显示第一张图像的描述。当他们再次点击下一步时，将隐藏所有以前的标题和描述，并显示第二个标题。再次单击下一步将显示第二个描述，依此类推。

我根本不懂javascript。我写了这个示例代码来显示我想要的行为。理想情况下，我可以指定标题的最大数量，这样当它在最后一个项目上时，我可以将下一个按钮变灰。

    <button id="b1">Next</button>
    <button id="b2" style="display:none;">Next</button>
    <button id="b3" style="display:none;">Next</button>
    <div class="description" id="1t">This is Title 1</div>
    <div class="title" id="1d" style="display:none;">This is description # 1</div>
    <div class="description" id="2t" style="display:none;">This is Title 2</div>
    <div class="title" id="2d" style="display:none;">This is description # 2</div>
    <div class="description" id="3t" style="display:none;">This is Title 3</div>
    <div class="title" id="3d" style="display:none;">This is description # 3</div>

    <script>
    $("#b1").click(function () {
        $(".title").hide();
        $(".description").hide();
        $("button").hide();
        $("#1t").show();
        $("#1d").show();
        $("#b2").show();    
    });

    $("#b2").click(function () {
        $(".title").hide();
        $(".description").hide();
        $("button").hide();
        $("#2t").show();
        $("#b3").show();    
    });

    $("#b3").click(function () {
        $(".title").hide();
        $(".description").hide();
        $("button").hide();
        $("#2t").show();
        $("#2d").show();    
    });


    </script>

Answer 1

我知道这不是有效的编程，但经过大量的研究后我才开始工作。这就是我想出来的。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

  </head>
  <body>


        <div style="width: 500px;">
          <div style="float:left;">
            <a href="#"><div id="prevBtn" pageNum="<?=$pageNum?>" pageType="description" style="background-color: grey; padding: 5px; color: #fff; width: 100px;">Previous</div></a>
          </div>

          <div style="float:right;">
            <a href="#"><div id="nextBtn" pageNum="<?=$pageNum?>" pageType="description" style="background-color: grey; padding: 5px; color: #fff; width: 100px;">Next</div></a>
          </div>
          <div style="clear:both;"></div>

          <div class="description" id="1t">This is Title 1</div>
          <div class="title" id="1d" style="display:none;">This is description # 1</div>


        </div>

          <script>

          $("#nextBtn").click(function (e) {
              e.preventDefault();

              var pageNum = $("#nextBtn").attr("pageNum");
              var pageNumber = Number($("#nextBtn").attr("pageNum"));
              var pageType = $("#nextBtn").attr("pageType");

              if(pageNumber > <?=$totalPages?>) {
                console.log("Too many pages\n\n");
              } else if(pageNumber < 1) {
                console.log("Too few pages\n\n");

              } else {

                if( pageType == "description" ){
                  $("#1d").show();
                  pageNumber = pageNumber + 1;

                  pageType = "title";
                }else{
                  pageType = "description";
                  $("#1d").hide();

                }
                $("#nextBtn").attr("pageNum", pageNumber);
                $("#nextBtn").attr("pageType", pageType);

                document.getElementById("1t").innerHTML = "Title " + pageNum;
                document.getElementById("1d").innerHTML = "Description " + pageNum;
              }
              console.log("Page Number " + pageNum);
              console.log("Page Type " + pageType);
          });


          $("#prevBtn").click(function (e) {
              e.preventDefault();

              var pageNum = $("#prevBtn").attr("pageNum");
              var pageNumber = Number($("#prevBtn").attr("pageNum"));
              var pageType = $("#prevBtn").attr("pageType");

              if(pageNumber > <?=$totalPages?>) {
                console.log("Too many pages\n\n");
              } else if(pageNumber < 1) {
                console.log("Too few pages\n\n");

              } else {

                if( pageType == "description" ){
                  $("#1d").show();

                  pageType = "title";
                }else{
                  pageType = "description";
                  $("#1d").hide();
                  pageNumber = pageNumber - 1;


                }
                $("#prevBtn").attr("pageNum", pageNumber);
                $("#prevBtn").attr("pageType", pageType);

                document.getElementById("1t").innerHTML = "Title " + pageNum;
                document.getElementById("1d").innerHTML = "Description " + pageNum;

              }

              console.log("Page Number " + pageNum);
              console.log("Page Type " + pageType);
          });



          </script>





  </body>
  </html>

Jquery - 改变下一个按钮的行为

1 个答案: