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

Posted 2023-05-08

【中文标题】使用jQuery单击操作后重新启动功能

【英文标题】：Restart function after click action with jQuery

【发布时间】：2012-12-28 11:26:10

【问题描述】：

我有一些看起来像这样的函数：

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

【问题讨论】：

你想stop()动画吗？

我想在每次点击后检查我的状况，现在第一次点击后一切正常，但之后我只有动画动作......

您确定search_element 和active_search_element 在第二次和后续点击时是有效元素吗？对于 epascarello 所说的 +1 - 除了任何事情 - 在再次开始动画之前 stop() 总是个好主意，否则，如果用户在短时间内单击几次，您的动画将排队，一切都会变得跳跃。

【参考方案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");
    
);

【讨论】：

当然，现在活动类附加到第二个元素并永远保留它，非常感谢帮助，BR

【参考方案2】：

您没有将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");
    
);

【讨论】：

它适用于，谢谢，我认为这也是更灵活的编写方式