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

Jquery - Change Behavior Of Next Button

本文关键字：按钮 下一个 Jquery-      更新时间：2023-09-26

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

我一点也不懂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>

我知道这不是一个高效的编程，但经过大量的研究，我让它发挥了作用。以下是我的想法。

<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>
相关文章：