CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hal Abelson
Hal Abelson

Reputation: 89

How to add prev/next button within looping?

I have found this JavaScript code for a popup below. It is working properly. But I need to continue load that popups without exit (as a circle). So how can I add a loop to the button. 

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

Upvotes: 2

Views: 88

Answers (3)

devd
devd

Reputation: 392

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

Upvotes: 2

tao
tao

Reputation: 90013

This will do it:

$(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. If no next, it takes first. If no prev, it takes last.

Upvotes: 3

iPraxa Inc
iPraxa Inc

Reputation: 556

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

Upvotes: 0

Related Questions