当我用Javascript向下滚动结果时，我的代码出了什么问题?

What's wrong with my code when I scroll down the result with Javascript

本文关键字：代码 我的 什么 问题 Javascript 结果 滚动      更新时间：2023-09-26

如下所示，当我将鼠标拖拽到 Week时，我无法滚动看到HTML块中的final <li>，这可能不会顺利运行。我不知道这里出了什么问题，请查看一下，让我知道如何修改。

演示

HTML: 

<div class="yearly">2014
<div class="container">
    <ul class="ca-menu"></ul>
</div>
</div>
Javascript: 

$(document).ready(function () {
$(".yearly").mouseover(function () {
    var num_month = 48;
    var current_year = 2014;
    for (i = num_month; i >= 1; i--) {
        $(".ca-menu").after("<li class='weekly'><a href='/Lists/ChartIndex.aspx?Week=" + i + "&Year=" + current_year + "'>Week " + i + "</a></li>");
    }
})
    .mouseout(function () {
    $(".weekly").hide();
});
});

无法滚动到底部的原因是因为当您将鼠标悬停在<li>链接上时，鼠标悬停事件被反复调用。试试这个

$(document).ready(function(){
            $(".yearly").hover(function () {
        console.log('yahh');
        var num_month = 48;
        var current_year = 2014;
        for (i = num_month; i >= 1; i--) {
            $(".ca-menu").after("<li class='weekly'><a href='/Lists/ChartIndex.aspx?Week=" + i + "&Year=" + current_year + "'>Week " + i + "</a></li>");
        }
    },
       function () {
        $(".weekly").hide();
    });
        });

这是因为当您的鼠标移动到上面时，您将继续创建<li>。

使您的<li>列表在鼠标悬停功能之外。然后用相应的鼠标事件显示和隐藏它:

$(document).ready(function () {
        var num_month = 48;
        var current_year = 2014;
        for (i = num_month; i >= 1; i--) {
            $(".ca-menu").after("<li class='weekly'><a href='/Lists/ChartIndex.aspx?Week=" + i + "&Year=" + current_year + "'>Week " + i + "</a></li>");
        }
    $(".weekly").hide();
    $(".yearly").mouseover(function () {
        $(".weekly").show();
    })
        .mouseout(function () {
        $(".weekly").hide();
    });
});

JSfiddle

相关文章：