Question

我的.topics元素在DOM中重新定位 - 为了测试目的，获取＆＃34; active＆＃34; class - 当Waypoint触发时。

$('.navbar').waypoint(function() {
    $('.topics').toggleClass('active');
    $('.topics').appendTo( $('#menu') );
}, { offset: -50 });

当航点不再在视线中时，＆＃34;活动＆＃34; class按预期从.topics中删除，但.topics元素仍然附加到#menu。

是否可以通过切换appendTo（）;将.topics恢复到其原始DOM位置？或当Waypoint变为非活动状态时触发事件？

Answer 1

如何放入if语句来检查元素是否存在？

$('.navbar').waypoint(function() {
    $('.topics').toggleClass('active');
    if ($('#menu .topics').length) {
        $('#menu .topics').remove();
    } else {
        $('.topics').appendTo( $('#menu') );
    }
}, { offset: -50 });

Answer 2

不要试图在这里窃取@ Banana的代表，但是每次处理程序触发时，你都会发现避免多次重新发现.topics元素会更有效率。例如：

分配$（＆＃39; .topics＆＃39;）的结果，以便可以重复使用
测试.hasClass('active')而不是$('#menu .topics').length

如果我的理解是正确的，那么这应该与你对香蕉代码的改编产生相同的效果：

$('.navbar').waypoint(function() {
    var $topics = $('.topics').toggleClass('active');
    if($topics.hasClass('active')) {
        $topics.appendTo( $('#menu') );
    } else {
        $topics.appendTo( $('#orginialmenu') );
    }
}, { offset: -50 });

此类性能优化对于网站/应用的UI / UX质量非常重要，尤其是在DOM广泛的情况下。

使用jQuery Waypoints切换appendTo（）

2 个答案: