Weitergabe von Elementen an eine jquery/Javascript-Funktion

Question

Ich versuche, einen Kalender mit HTML und jquery/javascript zu machen. In diesem Kalender versuche ich, die Daten dynamisch in einer Reihe von divs mit einer gegebenen Klasse zu zeigen, die innerhalb eines anderen div liegt.

die HTML ist wie folgt:

<div id="view-month"> 

    <div class="day">&nbsp;&nbsp;</div> 
    ......an array of 42 elements for a 7 x 6 grid for viewing a month 
    <div class="day">&nbsp;&nbsp;</div> 
    <div class="day">&nbsp;&nbsp;</div> 

</div> 

die jquery i bin versucht, wie folgt:

 $(document).ready( function() { 

     var date = new Date(); // Gets the current date in a variable 
     var selected_date = date.getDate(); // gets the current date (only dd) 
     var month_no = date.getMonth(); // Gets the month as number - like January : 0, February : 1, March : 2 
     var year = date.getFullYear(); // Gets the year in 'yyyy' format 
     var month_string; // variable for holding the no. of days in the selected month 
     var no_of_days_in_month; // variable for holding the total no. of days in the selected month for the selected year 

     // ******** The following array holds the names of all the months for showing the chose month ********* // 
     var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 

     $('#month-and-year').html(months[month_no] + ', ' + year); // shows the month in the heading of the calendar on month-name, 'yyyy' format 


     // ******** code for showing dates of the selected month and year showing in the header ********// 

     //function monthDetail(month_string) { } 

     if (month_string == 'January') { 
      var no_of_days_in_month = 31; 
      month_no = 0; 
     } 

     if (month_string == 'February') { 

      var isleapyear = function(year) { 
       return (yr % 400) ? ((yr % 100) ? ((yr % 4) ? false : true) : false) : true; 
      } 

      if (isleapyear) { 
       var no_of_days_in_month = 29; 
      } 

      else { 
       var no_of_days_in_month = 28; 
      } 
      month_no = 1; 
     } 

     if (month_string == 'March') { 
      var no_of_days_in_month = 31; 
      month_no = 2; 
     } 

     if (month_string == 'April') { 
      var no_of_days_in_month = 30; 
      month_no = 3; 
     } 

     if (month_string == 'May') { 
      var no_of_days_in_month = 31; 
      month_no = 4; 
     } 

     if (month_string == 'June') { 
      var no_of_days_in_month = 30; 
      month_no = 5; 
     } 

     if (month_string == 'July') { 
      var no_of_days_in_month = 30; 
      month_no = 6; 
     } 

     if (month_string == 'August') { 
      var no_of_days_in_month = 31; 
      month_no = 7; 
     } 

     if (month_string == 'September') { 
      var no_of_days_in_month = 30; 
      month_no = 8; 
     } 

     if (month_string == 'October') { 
      var no_of_days_in_month = 31; 
      month_no = 9; 
     } 

     if (month_string == 'November') { 
      var no_of_days_in_month = 30; 
      month_no = 10; 
     } 

     if (month_string == 'December') { 
      var no_of_days_in_month = 31; 
      month_no = 11; 
     } 

     var alldivs = $('.day'); // the entire predfined array of divs with a given number (42, in the present case) 
            // (for a calendar - will be depending on the design of the grid for the month-view) 
            // is assigned to a variable 


      // ********* the following function draws/shows the calendar for the chosen month and year *********** // 

      function showCalendar(year, month_no, selected_date, alldivs) { 

       // ************** Get the first day of the month showing on the top pane **************// 

       var FirstDayofMonth = new Date(year, month_no, 1); // returns the first day of the given month in long date format 
                   // showing the day of the week, date, month, year and time 

       // ************** Get the first day of the first week of the month showing on the top pane **************// 

       var FirstDayofFirstWeek = FirstDayofMonth.getDay(); // returns the number place of the first day of the month 
                   // within 0 to 6 i.e. 7 days of week 

       var ofset; // this variable holds the number of divs to be left free from top left while showing the month selected 

       ofset = FirstDayofFirstWeek; 

       var no_of_div; // no of divs to be highlighted as days of the month in concern 

       no_of_div = no_of_days_in_month; 



       // **** the following variable holds the no of divs from the first div in the matrix of the calendar to the div 
       // **** showing the last date of the month in concern **** // 

       var divcount = parseInt(ofset)+parseInt(no_of_div); //without parseInt() it will produce garbage and hence ridiculously wrong result 


       var i; //index for looping over the entire array of divs (the entire grid for a calendar) 

       var j = 1; //for counting date of a calendar 



       for (i = 0; i <= divcount-1; i++) { 

         if (i >= ofset && i <= divcount) { 

          $(alldivs[i]).html(j).css({'background-color':'#ff7'}); 

           if (j == selected_date) { 

            $(alldivs[i]).html(j).css({'background-color':'#def'}); 

           } 

         j++;} 
        } 

       } // end of function showCalendar() 


     // ******************* end of function showCalendar() ********************** // 


     showCalendar(year, month_no, selected_date, alldivs); 

     // ******** code to show calendar in the grid ******** // 

     $('#go-to-previous-year').on('click', function() { 
      year = year - 1; 
      $('#month-and-year').html(months[month_no] + ', ' + year); 
      showCalendar(year, month_no, selected_date, alldivs); 
     }); 

     $('#go-to-next-year').on('click', function() { 
      year = year + 1; 
      $('#month-and-year').html(months[month_no] + ', ' + year); 
      showCalendar(year, month_no, selected_date, alldivs); 
     }); 

     $('#go-to-previous-month').on('click', function() { 

      if (month_no == 0) { 
       month_no = 12; 
       month_no = month_no - 1; 
       $('#month-and-year').html(months[month_no] + ', ' + year); 
       month_string = months[month_no]; 
       showCalendar(year, month_no, selected_date, alldivs); 
      } 
      else { 
       month_no = month_no - 1; 
       $('#month-and-year').html(months[month_no] + ', ' + year); 
       month_string = months[month_no]; 
       showCalendar(year, month_no, selected_date, alldivs); 
      } 
     }); 

     $('#go-to-next-month').on('click', function() { 
      if (month_no == 11) { 
       month_no = -1; 
       month_no = month_no + 1; 
       $('#month-and-year').html(months[month_no] + ', ' + year); 
       month_string = months[month_no]; 
       showCalendar(year, month_no, selected_date, alldivs); 
      } 
      else { 
       month_no = month_no + 1; 
       $('#month-and-year').html(months[month_no] + ', ' + year); 
       month_string = months[month_no]; 
       showCalendar(year, month_no, selected_date, alldivs);    
      } 

     }); 

     }); //end of $(document).ready() 

Ich denke, ich bin nicht die Anordnung der 42 divs mit Klasse vorbei ‚Tag 'richtig' (was ich hier mit Hilfe der Variable 'alldivs' versucht habe) und daher wird der Kalender nicht angezeigt. Es gibt keine Fehlermeldung von der Funktion.

Derselbe Code funktioniert, wenn ich ihn separat ausführe - d. H. Ohne ihn in eine Funktion zu setzen. Also meine Vermutung ist, dass ich das Array dieser 42 Divs an die Funktion als Parameter übergeben und ihre Attribute und HTML ändern muss, um den Kalender anzuzeigen.

Kann jemand helfen?

Grüße

Sukalyan

Answer 1

month_string ist nicht überall festgelegt, so no_of_days_in_month nie gesetzt wird, so fällt alles vorbei.

Fixing denen ich zumindest eine große gelbe Box mit 1-31 unten auf der Seite und 16 (heute) markiert, anstelle einer leeren Seite. Ich bin mir nicht sicher, ob das Endergebnis aussehen sollte, aber es ist ein Schritt nach vorne.