Question

我有一些看起来像这样的功能：

var live_search_list = $('.live_search_list ul'),
    active_search_element = live_search_list.find('li.active'),
    search_element = live_search_list.find('li'),
    jsPane = $('.jspPane'); 

$('.bottom_search').click(function(){
    if (!search_element.last().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element.next('li').addClass('active');
        jsPane.animate({top:"-=95px"});
    }
});
$('.top_search').click(function(){
    if (!search_element.first().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element.prev('li').addClass('active');
        jsPane.animate({top:"+=95px"});
    }
});

因此，问题在第一次点击后开始，我只有一个动作 - 这与动画有关。在第一次单击功能后，再次检查我的状态，而不是更改，删除类active。每次单击此按钮后，如何重新启动此功能？

Answer 1

您没有将active_search_element设置为新的有效元素！

该行：

active_search_element = live_search_list.find('li.active')

只选择那时的元素，它不会神奇地不断更新。

$('.bottom_search').click(function(){
    if (!search_element.last().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element = active_search_element.next('li').addClass('active');
        jsPane.animate({top:"-=95px"});
    }
});

$('.top_search').click(function(){
    if (!search_element.first().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element  = active_search_element.prev('li').addClass('active');
        jsPane.animate({top:"+=95px"});
    }
});

Answer 2

制作下一个li活动课程后，您需要在active_search_element

中重新学习它

var live_search_list = $('.live_search_list ul'),
    active_search_element = live_search_list.find('li.active'),
    search_element = live_search_list.find('li'),
    jsPane = $('.jspPane'); 

$('.bottom_search').click(function(){
    if (!search_element.last().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element.next('li').addClass('active');
        active_search_element = live_search_list.find('li.active')
        jsPane.animate({top:"-=95px"});
    }
});
$('.top_search').click(function(){
    if (!search_element.first().hasClass('active')) {
        active_search_element.removeClass('active');
        active_search_element.prev('li').addClass('active');
        active_search_element = live_search_list.find('li.active')
        jsPane.animate({top:"+=95px"});
    }
});

使用jQuery单击操作后重新启动功能

2 个答案: