如何使用js将下一个上一个按钮添加到弹出窗口？

Question

我尝试在弹出框上添加下一个按钮。现在它以特定顺序运行弹出窗口。此外，当最终弹出窗口打开时，按钮会自动禁用。但有一个问题。当我删除一些模式时，代码不起作用。我想按该顺序运行弹出窗口，当我删除一些弹出窗口时，弹出窗口希望正确运行。另外，我想创建上一个按钮。我该怎么做？请帮我解决问题。

这是我使用的代码。

 $(document).ready(function() {
       var currentmodal = 1;
       $(".getAssignment").click(function() {
          var $divs = $(".modalDialog");
          var modal = $("*[data-modalorder="+(currentmodal++)+"]");
          if(!$("*[data-modalorder="+currentmodal+"]").length)
          {
              modal.find("input.getAssignment").prop("disabled",true);
          }
          if ($divs.length > 0 && modal) {
              window.location.href = "#" + $(modal).attr("id");
          }
       });
    });


    <input class="getAssignment" type="button" value="Open Modal">

    <div id="openModal" class="modalDialog" data-modalorder=1>
        <div>
        <input class="getAssignment" type="button" value="Previous">
        <input class="getAssignment" type="button" value="Next">
        <a href="#close" title="Close" class="close">X</a>
       <h2>Modal Box 1</h2>
            <p>This is a sample modal box that can be created using the powers of CSS3.</p>
            <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
        </div>
    </div>

    <div id="openModal2" class="modalDialog" data-modalorder=2>
        <div>   
       <input class="getAssignment" type="button" value="Previous">
       <input class="getAssignment" type="button" value="Next">
       <a href="#close" title="Close" class="close">X</a>
       <h2>Modal Box 2</h2>
            <p>This is a sample modal box that can be created using the powers of CSS3.</p>
            <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
        </div>
    </div>

https://jsfiddle.net/Sanjeewani/q1tm8ck2/10/

Answer 1

您在 js 中使用的条件始终返回 true，并且数组的长度不是布尔值，因此您确实需要将其与整数进行比较。示例如下：

$("*[data-modalorder="+currentmodal+"]").length==0

Answer 2

$(document).ready(function() {
  $(".getAssignment2").click(function() {
   var pNode = $(this).closest(".modalDialog");
   if(pNode.prev(".modalDialog")){
     var id = pNode.prev(".modalDialog").attr("id");
     window.location.href = "#" + id;
   }
 });
 $(".getAssignment").click(function() {
  var pNode = $(this).closest(".modalDialog");
  if(pNode.next(".modalDialog")){
    var id = pNode.next(".modalDialog").attr("id");
    window.location.href = "#" + id;
  }
 });
});