首页 > 解决方案 > 如何通过单击 JavaScript 代码中定义的 div 在 HTML 中打印出当天的 JQuery?

问题描述

我正在使用 JavaScript 和响应式模式创建一个可点击的事件日历,并且正在努力解决。有没有 JS 专家可以帮忙?

目标/挑战:我想单击日历中的日期字段,显示一个模式,通过检索该日期编号并在 JQuery 中创建一个显示在日期中的日历,自动用该字段的对应日期填充日期字段输入日期。

这里的起始代码:

 var dt = new Date();
        function renderDate() {
            dt.setDate(1); 

            var day = dt.getDay(); 

            var today = new Date();

            var endDate = new Date(
                dt.getFullYear(),
                dt.getMonth() + 1, 
                0
            ).getDate();

            var prevDate = new Date(
                dt.getFullYear(), 
                dt.getMonth(), 
                0
            ).getDate();

            var months = [
                "Januar",
                "Februar",
                "März",
                "April",
                "Mai",
                "Juni",
                "Juli",
                "August",
                "September",
                "Oktober",
                "November",
                "Dezember"
            ]
            document.getElementById("month").innerHTML = months[dt.getMonth()]; 
            document.getElementById("date_str").innerHTML = dt.getFullYear(); 
            var cells = "";

            for (x = day; x > 0; x--) {
                cells += "<div class='month-day'><div class='eachday prev_date'>" + (prevDate - x + 1) + "</div></div>"
            }

这里代码开始在“div class='month-day nBtn'”内打印当月的每一天。并且类名 nBtn 在 JQuery 中调用了一个模式,我想在其中打印出当前日期。

            for (i = 1; i <= endDate; i++) { 
                if (i == today.getDate() && dt.getMonth() == today.getMonth()) cells += "<div class='today'>" + i + "</div>"; 
                else 
                    cells += "<div class='month-day nBtn'><div class='eachday'>" + i + "</div></div>";
            }
            document.getElementsByClassName("days")[0].innerHTML = cells; 

        }
        function moveDate(para) {
            if(para == "prev") {
                dt.setMonth(dt.getMonth() - 1); 
            } else if(para == 'next') {
                dt.setMonth(dt.getMonth() + 1); 
            }
            renderDate();
        }        

查询:

        $(document).ready(function(){   
            $('.nBtn').on('click',function(){
                $('.myForm #exampleModal').modal(); 
            });                     
        });

当我尝试检索索引时,我在 HTML 脚本代码中单击日历中的所有字段都只得到零。我想在 JQuery 代码中输入在我单击的字段中打印出的当天数字。

标签: javascriptjqueryhtml

解决方案


尝试这样的事情:

$(document).ready(function(){   
   $('.nBtn').on('click',function(){
      var day = $(this).find('.eachday').text();
      $('.myForm #exampleModal').html(day);
      $('.myForm #exampleModal').modal(); 
   });                     
});

推荐阅读