0

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

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。每次单击此按钮后如何重新启动此功能？

4

2 回答 2

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"});
    }
});
于 2013-01-14T14:02:33.577 回答
1

将下一个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"});
    }
});
于 2013-01-14T14:02:44.590 回答