Question

我正在使用YUI3 Calendar，我希望在月份发生变化时执行操作。我想在YUI Calendar中单击下一个/上个月按钮时执行回调。我怎么能这样做？

我尝试使用A.one()，但它似乎无法运作。这是我目前的尝试：

<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
<div class="yui3-skin-sam">
    <div id="event-calendar"></div>
</div>
<script type="text/javascript">
    YUI().use('calendar', function (Y) {

        new Y.Calendar({
            contentBox: "#event-calendar",
            width: '230px',
            showPrevMonth: false,
            showNextMonth: false,
            date: new Date()
        }).render();

        A.one(".yui3-calendarnav-nextmonth").on('click', function (ev) {
            // ... execute code here
        });
    });
</script>

Answer 1

您的代码似乎对我有用，所以我认为您的问题出在这一行：

A.one(".yui3-calendarnav-nextmonth").on('click', function (ev) {

您正在通过CSS类选择单个元素，但多个元素可以具有相同的类。所以你可能正在选择具有相同类的另一个Node。您可以使用CSS选择器更具体地使用此代码：

A.one("#event-calendar .yui3-calendarnav-nextmonth").on('click', function (ev) {

现在您选择的元素为class="yui3-calendarnav-nextmonth"，父元素为id="event-calendar"。这应该只为您的event-calendar选择下个月按钮。

这是一个在点击监听器中使用警报的可运行示例：

YUI().use('calendar', function (A) {

    new A.Calendar({
        contentBox: "#event-calendar"
    }).render();

    A.one("#event-calendar .yui3-calendarnav-prevmonth").on('click', function (ev) {
        alert('prevMonth');
    });

    A.one("#event-calendar .yui3-calendarnav-nextmonth").on('click', function (ev) {
        alert('nextMonth');
    });
});

<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
<div class="yui3-skin-sam">
    <div id="event-calendar"></div>
</div>

有关更多详细信息，请参阅YUI Calendar，Node和YUI.one() API文档。另请查看MDN的Information: Selectors文章，了解有关CSS选择器的更多信息。

如何在YUI日历中的下一个/上个月点击时执行回调？

1 个答案: