jQuery動畫div切換器相應的列表項

我目前正在學習jquery，並遇到了一個障礙。我正在編寫兩個部分的頁面。一個是無序的食物類型列表。另一個是一組div，每個div都顯示不同類型的啤酒，以補充每種食物類型。每個列表項目及其對應的div共享同一個類別。所有的div都位於視圖之外。jQuery動畫div切換器相應的列表項

我想要完成的是每個列表項的onclick，無論視圖中的div動畫在視圖外，然後點擊列表項的相應div動畫到視圖中。

我得到了這個工作，但後來由於某種原因，它停止工作。我不知道這是否與我的代碼有關，或者是否有更好的方式去完成這個項目。

$(function(){ 
     $('.beer_container > div.default').css('top', '0'); 
     $('ul.food_items li').click(function(){ 
     var theClass = $(this).attr('class'); 
     var $theBeer = $('div.beer_container > div[class="+ theClass +"]'); 
     var $oldBeer = $('div.beer_container > div:not([class="+ theClass +"])'); 

      $oldBeer.animate(
      {'top': '-420'}, 
      'slow', function(){ 
      $theBeer.animate(
      {'top': '0'}, 'slow'); 
      }); 
     }); 

     }); 




     <div class="left food_container"> 
      <ul class="food_items"> 
      <li class="lighter_foods">Lighter Foods</li> 
      <li class="classic_burger">Classic Burger</li> 
      <li class="strong_spicy">Strong &amp; Spicy</li> 
      <li class="rich_hearty">Rich &amp; Hearty</li> 
      <li class="smoked">Smoked Meats</li> 
      </ul> 
     </div> 
     <div class="right beer_container"> 
      <div class="default"> 
      This is the intro page. What are you eating? 
      </div> 
      <div class="lighter_foods"> 
      Blonde Ale, Hefeweizen, Wheat Ale, Witbier, Pilsener 
      </div> 
      <div class="classic_burger"> 
      Pale Ale, Amber/Red Ale, Amber Lager 
      </div> 
      <div class="strong_spicy"> 
      IPA, Amber/Red Ale, Abbey Tripel, Sweet or Oatmeal Stout, Oktoberfest/Maerzen, Pale Bock 
      </div> 
      <div class="rich_hearty"> 
      Bitter, Scotch Ale, Brown Ale, Abbey Dubbel, Old or Strong Ale, Porter, Dry Stout, Dunkelweizen, Weizenbock, Doppelbock, Dark Lager 
      </div> 
      <div class="smoked"> 
      Double/Imperial IPA, Brown Ale, Abbey Dubbel, Porter, Imperial Stout 
      </div> 
     </div>

來源

2011-10-27 user1015636

看起來像一些單引號變成了雙引號。

var $theBeer = $('div.beer_container > div[class=' + theClass + ']'); 
var $oldBeer = $('div.beer_container > div:not([class=' + theClass + '])');

我不是贊同定位的那個方法，但你絕對不希望找與類「+ + theClass描述」

來源

2011-10-27 01:09:38 Sinetheta

非常感謝格！我覺得這是一個小菜！ – user1015636

jQuery動畫div切換器相應的列表項

回答

相關問題