Что не так с моим кодом, когда я прокручиваю результат вниз с помощью Javascript

Question

Что не так с моим кодом, когда я прокручиваю результат вниз с помощью Javascript

0

Как показано ниже, когда я перетаскиваю мышь на Week и я не могу прокрутить, чтобы увидеть окончательный <li> в блоке HTML, и это может быть не так гладко. Я не знаю, что здесь не так, пожалуйста, взгляните на него и сообщите мне, как это изменить.

Demo

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();
});

});

PMay 1903 23 май 2014, в 07:19

Источник

3

Я смог прокрутить вниз до последней ли ... или я не правильно понял вашу проблему
asprin 23 май 2014, в 05:02
1

Я также смог увидеть последний раз ...
Ballbin 23 май 2014, в 05:03
1

Это происходит только тогда, когда мышь находится над тегами привязки <a>.
Shaunak D 23 май 2014, в 05:07

Показать ещё 1 комментарий

Теги:

javascript

jquery

2 ответа

1

Это связано с тем, что вы продолжаете создавать <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

jhyap 23 май 2014, в 03:37

0

Спасибо за ваш комментарий. Однако, кажется, что он не работает хорошо, когда я перетаскиваю мышь на Week и прокручиваю вниз, а затем ... это не сработало.
PMay 1903 23 май 2014, в 05:32

Ещё вопросы

Я смог прокрутить вниз до последней ли ... или я не правильно понял вашу проблему
Я также смог увидеть последний раз ...
Это происходит только тогда, когда мышь находится над тегами привязки <a>.
Спасибо за ваш комментарий. Однако, кажется, что он не работает хорошо, когда я перетаскиваю мышь на Week и прокручиваю вниз, а затем ... это не сработало.

neerajdngl · Accepted Answer · 2014-05-23T02-35-00.000Z

Причина, по которой вы не можете прокручивать нижнюю часть, состоит в том, что, когда вы наводите курсор на <li>, событие mouseover неоднократно вызывается. Попробуй это

$(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();
    });

        });

Спасибо за ваш код. Это хорошо решило мою проблему :-)