如何在循环中添加上一个/下一个按钮?

时间:2018-07-24 11:41:58

标签: javascript jquery html css

我在下面的弹出窗口中找到了此JavaScript代码。它工作正常。但是我需要继续加载弹出窗口而不退出(以圆圈为单位)。因此,如何为按钮添加循环。

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

JSFiddle

3 个答案:

答案 0 :(得分:3)

这可以做到:

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

Fiddle。如果没有,则先执行。如果没有上一个,则需要倒数第二次。

答案 1 :(得分:2)

$(document).ready(function() {
  $(".getAssignment2").click(function() {
   var pNode = $(this).closest(".modalDialog");

   if(pNode.prev(".modalDialog")){
     var id = pNode.prev(".modalDialog").attr("id");
     if (id != undefined)
        window.location.href = "#" + id;
     else {
         var id = $(".modalDialog").last().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");
    if (id != undefined)
       window.location.href = "#" + id;
    else {
       var id = $(".modalDialog").first().attr("id");
       window.location.href = "#" + id;
    }   
  }
 });
});

JSFiddle

答案 2 :(得分:0)

$(document).ready(function() {
      $(".getAssignment2").click(function() {
       var pNode = $(this).closest(".modalDialog");
       if(pNode.prev(".modalDialog").length > 0){
         if(pNode.prev(".modalDialog")){
           var id = pNode.prev(".modalDialog").attr("id");
           window.location.href = "#" + id;
         }
       }else{
        if(pNode.prev(".modalDialog")){
           var id = $(".modalDialog:nth-last-of-type(1)").attr("id");
           window.location.href = "#" + id;
         }
       }
     });
     $(".getAssignment").click(function() {
      var pNode = $(this).closest(".modalDialog");  
      if(pNode.next(".modalDialog").length > 0){
        if(pNode.next(".modalDialog")){
          var id = pNode.next(".modalDialog").attr("id");
          window.location.href = "#" + id;
        }
      }else{
        if(pNode.next(".modalDialog")){
          var id = $(".modalDialog:nth-of-type(1)").attr("id");
          window.location.href = "#" + id;
        }
      }
     });
    });