0

当我将鼠标悬停在一周上时，我试图让一周的日期与每天的数据弹出。如果我在一周内单击一个日期，我可以让它弹出一个显示，但我希望它发生在鼠标悬停/鼠标输入上。这是我的代码：

    <html>  
    <head>  
      <link href="./jquery-ui.css" rel="stylesheet" type="text/css"/>  
      <script type="text/javascript" src="./jquery.min.js"></script>  
      <script src="./jquery-ui.min.js"></script>  
      <script type="text/javascript" src="./popup.js"></script>

      <script>  

      var dateString;
      var sundayDate;
      var mondayDate;
      var tuesdayDate;
      var wednesdayDate;
      var thursdayDate;
      var fridayDate;
      var saturdayDate;


      $(document).ready(function() {  
        $("#datepicker").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                onSelect: function(dateText, inst) {
                    var date = new $(this).datepicker('getDate');
                    sundayDate    = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                    mondayDate    = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
                    tuesdayDate   = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
                    wednesdayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
                    thursdayDate  = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
                    fridayDate    = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
                    saturdayDate  = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                }
        });

        $('td a').live('mouseenter', function () {
            popup('<table border="1" width="350">' +
            '   <tr>' +
            '      <th>Su</th>' +
            '      <th>Mo</th>' +
            '      <th>Tu</th>' +
            '      <th>We</th>' +
            '      <th>Th</th>' +
            '      <th>Fr</th>' +
            '      <th>Sa</th>' +
            '   </tr>' +
            '   <tr height= "50px">' +
            '      <td valign="top" width = "50px">' + sundayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + mondayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + tuesdayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + wednesdayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + thursdayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + fridayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + saturdayDate.getDate() + '</td>' +
            '   </tr>' +
            '</table>');
        });

      });
    </script> 
    </head>  
    <body>  

    <div class="demo">
        <div id="datepicker"></div>
    </div>

    </body>  
    </html>

我已经阅读了一些关于使用 .on 而不是 .live 的内容，因为那是当前的方法，但我仍然不知道如何在“鼠标悬停”上选择一个日期并将其用于显示当前日期。我可以处理格式化一周的表格外观和输入数据，但我希望选择鼠标结束的日期并触发 onSelect 操作。

提前感谢您对此的任何回应。

4

1 回答 1

0

我认为您可以通过使用包含以下效果的按钮或其他对象来触发此操作：

<label onmouseover="mouseenter">move here</label>
于 2012-08-18T14:22:11.957 回答