javascript - 如何将js函数添加到jquery日历和动态工具提示

Question

我尝试使用 jquery calender 突出显示一些日期，我只为边框成功地做到了，但我不能为背景。但我仍然无法添加动态工具提示。我还需要在点击时调用函数。

我该怎么做(点击功能 - 突出显示背景 - 动态工具提示“倾斜到日期数组”)？

$(document).ready(function () {
        var disabledDays = ["2017-5-21", "2017-5-24", "2017-5-27", "2017-5-28"]; 
        var tooltip = ["1 tip", "2 tip", "3 tip"];
        var date = new Date();
        jQuery(document).ready(function() { 
            $('#datepicker').datepicker({
                dateFormat: 'yy-mm-dd',
                beforeShowDay: function(date) {
                    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
                    for (i = 0; i < disabledDays.length; i++) {
                        if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
                            return [1, 'calender_highlight', 'tooltip']; 
                        }
                    }
                    return [true];
                }
            });
        });
    });

.calender_highlight{
           border:2px solid #ffd800;
           background-color:#ffd800;
       }
       .calender_highlight:hover{
         border:2px solid green;
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="datepicker"></div>

Answer 1

因为日期选择器的 html 是动态生成的，所以您必须使用正确的事件绑定(bind)，您正在寻找的是 .on() jquery 的功能:

$('#datepicker').on('mouseenter','.ui-state-default',  function(e) {
  $(this).attr('title', 'My tooltip');
});

通过这种方式，您将获得浏览器的默认标题样式。还有一个bootstrap tooltip您可以考虑的功能。