翻轉卡無法正常工作jquery

只要我第一次點擊卡，它會很好。但是，每當卡片已翻轉，我試圖點擊回來，所以它會翻轉，文字似乎消失，但沒有其他事情發生。翻轉卡無法正常工作jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>flip cards</title> 
    <style type="text/css"> 
     * {margin:0; padding:0;}    
     ul#cards li{list-style-type:none; margin:5px; } 
     ul#cards img, #cards dl{width:200px; height:250px;background-color:orange;padding:5px;} 
     ul#cards dl{display:none;} 
     ul#cards dt{font-weight:bold;} 

    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript"> 
     $(document).on("ready", geladen); 
     function geladen(){ 
      console.log("geladen"); 
      $('#cards img').on("click", turn); 
      $('#cards dl').on("click", turnBack); 

     } 
     function turn(event){ 
      $(event.target) 
       .animate({"width":"0", "margin-left":"100"}, 500, 
        function(){ 
         $(this).css("display", "none")     
         .next() 
         .css("display", "block") 
         .animate({"width":"200", "margin-left":"0"}, 500); 
        } 
       ) 
     } 
     function turnBack(event){ 
      $(event.target) 
       .animate({"width":"0", "margin-left":"100"}, 500) 
       .css("display", "none") 
       .prev() 
       .css("display", "block") 
       .animate({"width":"200", "margin-left":"0"}, 500); 
     } 
    </script> 
</head> 

<body> 
    <ul id="cards"> 
     <li> 
      <img src="wesley.jpg" alt="Wesley Sneijder, middenvelder" /> 
      <dl> 
       <dt>naam</dt> 
       <dd>Wesley Sneijder</dd> 
       <dt>rol</dt> 
       <dd>middenvelder</dd> 
       <dt>geboortedatum</dt> 
       <dd>9 juni 1984</dd> 
       <dt>club</dt> 
       <dd>Inter Milan</dd> 
      </dl> 
     </li> 
     <li> 
      <img src="robin.jpg" alt="Robin van Persie, aanvaller" /> 
      <dl> 
       <dt>naam</dt> 
       <dd>Robin van Persie</dd> 
       <dt>rol</dt> 
       <dd>aanvaller</dd> 
       <dt>geboortedatum</dt> 
       <dd>6 augustus 1983</dd> 
       <dt>club</dt> 
       <dd>Arsenal</dd> 
      </dl> 
     </li> 
    </ul> 
</body>

來源

2012-07-03 Master Ivin ChickenSheep

這是很多代碼。你可以設置JS小提琴或什麼來突出這個問題？ – Utkanos

嘗試這樣做，而不是在$ $上翻折動畫（本）（event.Target）

function turnBack(event){ 
     $(this) 
      .animate({"width":"0", "margin-left":"100"}, 500) 
      .css("display", "none") 
      .prev() 
      .css("display", "block") 
      .animate({"width":"200", "margin-left":"0"}, 500); 
    }

event.target包含文本（DT /日），這是實際上由於冒泡而點擊，而這指的是點擊所附的元素。

來源

2012-07-03 08:47:35

非常感謝 –

翻轉卡無法正常工作jquery

回答

相關問題