jquery/javascript 함수에 요소 배열 전달

Question

html 및 jquery/javascript로 달력을 만들려고합니다. 이 캘린더에서는 특정 클래스가있는 div의 행에 날짜를 동적으로 표시하려고 시도하고 다른 div 내부로 플로트했습니다. '일

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

은 내가 클래스 42 개 된 div의 배열을 전달하고 있지 않다 추측 :

다음과

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

내가 노력하고 JQuery와이기 때문에 다음과 같이

되는 HTML입니다 '적절하게 (나는'alldivs '라는 변수를 사용하여 시도하고있다.) 따라서 달력은 보이지 않는다. 함수에서 오는 오류 메시지가 없습니다.

별도로 실행할 때 동일한 코드가 작동합니다. 즉 함수 안에 넣지 않아도됩니다. 그래서 내 생각 엔이 42 개 div의 배열을 매개 변수로 함수에 전달하고 해당 속성과 html을 변경하여 달력을 표시해야한다는 것입니다.

아무도 도와 줄 수 있습니까?

감사

Sukalyan

Answer 1

month_string 그렇게 no_of_days_in_month가 설정되지 없구요, 어디 설정되지 않으므로 모든 이상 떨어진다.

나는 적어도 페이지가 1-31 아래에 큰 노란색 상자가 있고 빈 페이지 대신에 강조 표시된 16 개 (오늘)가 표시됩니다. 최종 결과가 어떻게 나타나야하는지 확실하지 않지만 앞으로 나아갈 단계입니다.