Question

我正在建立一个网站，其中包含两种类型的菜单，每种类型都有不同数量的项目。当用户点击下一个按钮时，每个项目将滑动50％，然后在下一个＆＃34; next＆＃34;点击，该项目将滑动100％，为下一个项目腾出空间。下一个项目将滑动50％，依此类推。＆＃34; prev＆＃34;按钮将执行相同操作，但向后。此外，用户可以选择要查看的菜单类型，动画将应用于相关项目。

我有这个HTML（＆amp; PHP）

<div id="menu">
<nav>
    <ul>
        <a href="#cocktails" class="menuanchor"><li>Cocktails</li></a>
        <a href="#kitchen" class="menuanchor"><li>Kitchen</li></a>
    </ul>
</nav>
<ul class="kitchen-box">
    <?php foreach ($kitchen as $item) { 
        echo "<li class='swing'>" . $item["name"] . "</li>";
    } ?>
</ul>
<ul class="cocktails-box">
    <?php foreach ($cocktails as $cocktail) { 
        echo "<li class='swing'>" . $cocktail["name"] . "</li>";
    } ?>
</ul>
<a href="#next" class="next">next</a>
<a href="#prev" class="prev">prev</a>

班级挥动存储动画，＆＃34;暂停＆＃34;宣言。为了检测单击了哪个菜单类型，我使用以下JS：

    $('.menuanchor').click(function() {

    //Getting the current menu type.
    var menutype = $(this).attr("href").replace('#', '');

    //Removes any previous styles no matter which menu was chosen.

    $('.cocktails-box li').removeClass('backwards-animationStart');
    $('.cocktails-box li').removeClass('animationStart');
    $('.cocktails-box li').removeClass('backwards-completeAnimation');
    $('.cocktails-box li').removeClass('completeAnimation');
    $('.kitchen-box li').removeClass('backwards-animationStart');
    $('.kitchen-box li').removeClass('animationStart');
    $('.kitchen-box li').removeClass('backwards-completeAnimation');
    $('.kitchen-box li').removeClass('completeAnimation');
    //Runs the swing function.
    swing(menutype);
});

swing函数可以将类添加到相关菜单中的next / prev列表项。 completeAnimation和animationStart是50％和100％的动画，后退版本是prev按钮以相反的方向运行项目。

    function swing(menutype) {
    //Counting the number of items in the menu.
    var count = $('.' + menutype + '-box').children().length;
    //Always starting the click counts on 1 (so nth-child will start on 1)
    var nextClicks = 1;
    console.log(nextClicks);

    $('.next').click(function () {
        if (nextClicks > 1 && nextClicks <= count) {
            //Runs the next item with a 50% swing and removes previous styles.
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').addClass('animationStart');
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').removeClass('backwards-animationStart');
            //Select the previous element to the nth-child of the user, and removes previous styles.
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').prev().removeClass('animationStart');
            //Select the previous element to the nth-child of the user, and completes the swing to 100% and removes previous styles.
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').prev().addClass('completeAnimation');
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').prev().removeClass('backwards-completeAnimation');
            nextClicks++;
        } else if (nextClicks == count) {
            //Won't let user pass the max list item number.
            nextClicks = count;
        } else if (nextClicks == 1) {
            //Removes previous styles.
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').removeClass('backwards-animationStart');
            //Runs the next item with a 50% swing. - APPLIES ONLY TO THE FIRST ITEM.
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').addClass('animationStart');
            nextClicks++;
        }

    });

    $('.prev').click(function() {

        if (nextClicks == 2) {
            //Removes previous styles.
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').prev().removeClass('animationStart');
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').prev().removeClass('backwards-completeAnimation');
            //If the user clicks prev after selecting ONLY the first item, it will select it and move it backwards.
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').prev().addClass('backwards-animationStart');
            //Won't let the user get to negetive number of items.
            nextClicks = 1;
        }

        else if (nextClicks > 2) {
            //Selects the current list item.
            nextClicks--;
            //Returns the previous list item backwards.
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').prev().addClass('backwards-completeAnimation');
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').prev().removeClass('completeAnimation');
            //Returns the current list item backwards.
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').addClass('backwards-animationStart');
            //Checking if the user already used the prev button.
            if ($('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').hasClass('backwards-completeAnimation')) {
                $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').removeClass('backwards-completeAnimation');
            }
            $('.' + menutype +  '-box li:nth-child(' + nextClicks + ')').removeClass('animationStart');
        }

    });
}

我知道这是一个非常冗长和丑陋的代码，但它是在这种特定情况下我能做的最好的。当用户单击菜单类型并使用next / prev按钮时，一切正常。但是当用户再次点击相同的菜单类型或不同的菜单类型，并使用下一个/上一个按钮时，该功能似乎记得旧的＆＃34; nextClicks＆＃34;和＆＃34; menutype＆＃34;值，并且每次调用函数时都不重置它。

有没有办法从它的旧值中清除整个摆动功能，并在每次调用它时再次加载它？

您可以在＆＃34;菜单＆＃34;下的boazkerengil.com/zoubisou查看实时示例。部分（该页面正在制作中，因此它搞砸了，动画用颜色表示 - 蓝色：animationStart，黄色：完整动画，橙色：向后 - 动画启动，紫色：向后 - 完成反应）

Answer 1

每次调用swing函数时，请尝试重置click事件：

$('.next').unbind("click").click(function() ...});
$('.prev').unbind("click").click(function() ...});

如何在每次调用时从它的值中清除jQuery函数

1 个答案: