jquery - ui-datepicker 中事件行的悬停状态

Question

我正在尝试向 jQuery UI 日期选择器添加“当前周”指示器。我有一个自定义事件，在显示日期选择器后触发。它工作了一半，但是快速上下移动时会出现某种滞后(即使悬停类别已清除)。我不知道为什么在鼠标离开该行后边框仍然应用于 tr 。

function addCalendarHover(){
    $('.ui-datepicker-calendar').on('mousemove', 'tr', function () {
        $(this)
            .addClass('week-hover')
            .find('td a').addClass('ui-state-hover');
    });
    $('.ui-datepicker-calendar').on('mouseleave', 'tr', function () {
        $(this)
            .removeClass('week-hover')
            .find('td a').removeClass('ui-state-hover');
    });
}
// add 'afterShow' event for jQUI date picker
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
}
$('#date1').datepicker({
    changeMonth: true,
    changeYear: true,
        afterShow: function(date) {
            addCalendarHover(); 
        }
});

.ui-datepicker-calendar > tbody > tr {
    border: 1px solid white;
}
    .ui-datepicker-calendar > tbody > tr.week-hover {
        /*border: 1px solid #ffaf46;*/
        border: 1px solid #ffaf46;
    } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

https://jsfiddle.net/Echilon/5y0wampc/

Answer 1

只用css就可以实现你想要的，并且不会有这个问题，在这种情况下不需要js

查看代码片段:

function addCalendarHover() {
  /* $('.ui-datepicker-calendar').on('mousemove', 'tr', function () {
        $(this)
            .addClass('week-hover')
            .find('td a').addClass('ui-state-hover');
    });
    $('.ui-datepicker-calendar').on('mouseleave', 'tr', function () {
        $(this)
            .removeClass('week-hover')
            .find('td a').removeClass('ui-state-hover');
    });*/
}
// add 'afterShow' event for jQUI date picker
$.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
  $.datepicker._updateDatepicker_original(inst);
  var afterShow = this._get(inst, 'afterShow');
  if (afterShow)
    afterShow.apply((inst.input ? inst.input[0] : null)); // trigger custom callback
}
$('#date1').datepicker({
  changeMonth: true,
  changeYear: true,
  afterShow: function(date) {
    addCalendarHover();
  }
});

.ui-datepicker-calendar>tbody>tr {
  border: 1px solid white;
}

.ui-datepicker-calendar>tbody>tr:hover td a:not(.ui-state-highlight) {
  
  font-weight: normal;
  color: #555555;
  border: 1px solid #999999;
}

.ui-datepicker-calendar>tbody>tr:hover td {
  border-top: 1px solid #ffaf46;
  border-bottom: 1px solid #ffaf46;
}

.ui-datepicker-calendar>tbody>tr:hover td:first-child {
  border-left: 1px solid #ffaf46;
}

.ui-datepicker-calendar>tbody>tr:hover td:last-child {
  border-right: 1px solid #ffaf46;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1" /> <br/>