如何從每次調用它的值時清除jQuery函數

Question

我正在構建一個包含兩種類型菜單的網站，每種類型都有不同數量的項目。當用戶點擊下一個按鈕時，每個項目將滑動50％，在下一個「下一個」點擊時，該項目將滑動100％，爲下一個項目騰出空間。下一個項目將滑動50％等等。 「prev」按鈕將執行相同的操作，但是會向後移動。 此外，用戶可以選擇他想要查看的菜單類型，並將動畫應用於相關項目。

我有這樣的HTML（& 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> 

類擺動存儲動畫，用 「暫停」 的聲明。 爲了檢測其菜單式被點擊我使用以下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); 
}); 

的搖擺功能確實將類添加到下/上一個列表項中的相關菜單的伎倆。 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按鈕時，一切正常。 但是，當用戶再次點擊相同的菜單類型或不同的菜單類型，並使用next/prev按鈕時，似乎該功能會記住舊的「nextClicks」和「menutype」值，並且不會每次重置該功能叫做。

是否有任何方法可以從它的舊值中清除整個迴轉函數，並在每次調用它時再次加載它？

您可以在「菜單」部分下查看boazkerengil.com/zoubisou的生動示例（該頁面正在製作中，因此它被混淆並且動畫用顏色表示 - blue：animationStart，黃色：completeAnimation，orange：backwards-animationStart，紫色：向後completeAnmiation）

Answer 1

嘗試在每次調用這樣的搖擺功能時重置click事件：

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