jQuery動畫改變多個類名不工作

Question

有人可以請看看這個，並告訴我我做錯了什麼。這是與點擊.content-wrapper元素將移動和.move.up WIL改變類名.move.dwn 類move.up跨度後，move.dwn.click(function()應該開始，但我永遠不能使它到這一點，爲什麼呢？

<style type="text/css"> 
    .content-wrapper { 
     height:100px; 
     width:100px; 
     background-color:orange; 
     position:relative; 
    } 
    span.move { 
     background-color:fuchsia; 
     cursor:pointer; 
    } 
</style> 

<span class="move up">click here</span> 
<div class="content-wrapper"></div> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('.move.up').click(function() { 
      alert("up"); 
      $('.content-wrapper').animate({'left': '+=568px'}, 'slow'); 
      $(this).removeClass('up'); 
      $(this).addClass('dwn'); 
     }); 

     $('.move.dwn').click(function() { 
      alert("dwn"); 
      $('.content-wrapper').animate({'left': '-=568px'}, 'slow'); 
      $(this).removeClass('dwn'); 
      $(this).addClass('up'); 
     }); 
    }); 

</script> 

Answer 1

你的問題就出在.click（）函數不更新它們綁定的元素。幸運的是jQuery在on（）（以前的live（））中有一個解決方案。這將動態綁定你的事件，更新後它仍然會在類上選擇。

試試這個：

<script type="text/javascript"> 
$(document).ready(function() { 

    $('.move.up').on('click', function() { 
     alert("up"); 
     $('.content-wrapper').animate({'left': '+=568px'}, 'slow'); 
     $(this).removeClass('up'); 
     $(this).addClass('dwn'); 
    }); 

    $('.move.dwn').on('click', function() { 
     alert("dwn"); 
     $('.content-wrapper').animate({'left': '-=568px'}, 'slow'); 
     $(this).removeClass('dwn'); 
     $(this).addClass('up'); 
    }); 
}); 

Answer 2

您要添加的單擊事件之前的產品在DOM。相反，將點擊事件監聽器添加到父代，並在它們冒泡時執行。

$(document).ready(function() { 
    $(document).on('click', '.move.up', function(){ 
     alert("up"); 
     $('.content-wrapper').animate({'left': '+=568px'}, 'slow'); 
     $(this).removeClass('up'); 
     $(this).addClass('dwn'); 
    }).on('click', '.move.dwn', function(){ 
     alert("dwn"); 
     $('.content-wrapper').animate({'left': '-=568px'}, 'slow'); 
     $(this).removeClass('dwn'); 
     $(this).addClass('up'); 
    }); 
}); 

Answer 3

由於您的$('.move.dwn').click(function() {綁到可能會或可能不會在頁面加載存在$('.move.dwn')元素，你需要綁定到頁面的文檔可以加載不同的元素。我會改變如下所示的功能

<script type="text/javascript"> 
$(function() { 
    $(body).on('click', '.move.up', function() { 
     alert("up"); 
     $('.content-wrapper').animate({'left': '+=568px'}, 'slow'); 
     $(this).removeClass('up'); 
     $(this).addClass('dwn'); 
    }); 

    $(body).on('click', '.move.down', function() { 
     alert("dwn"); 
     $('.content-wrapper').animate({'left': '-=568px'}, 'slow'); 
     $(this).removeClass('dwn'); 
     $(this).addClass('up'); 
    }); 
}); 
</script> 

Answer 4

你使用的是什麼jQuery版本？

如果您使用的是1.8版本，這可能會幫助您：

$('.move').on("click", function() { 
    if($(this).hasClass('up')) { 
     $('.content-wrapper').animate({ 
      'left': '+=568px' 
     }, 'slow'); 
     $(this).removeClass('up'); 
     $(this).addClass('dwn'); 
    } 
    else { 
     $('.content-wrapper').animate({ 
      'left': '-=568px' 
     }, 'slow'); 
     $(this).removeClass('dwn'); 
     $(this).addClass('up'); 
    } 

}); 

例（改變距離100像素，使其更容易看到）： http://jsfiddle.net/XWyZD/1/