对应列表项的 jQuery 动画 div 切换器

Question

我目前正在学习 jquery，但遇到了障碍。我正在构建一个包含两个部分的页面。一种是食物类型的无序列表。另一个是一组 div，每个 div 都展示不同类型的啤酒，以补充每种食物类型。每个列表项及其相应的 div 共享相同的类。开始时所有 div 都位于 View 之外。

我想要完成的是每个列表项的 onclick， View 中的任何 div 都会以动画方式离开 View ，然后被单击的列表项的相应 div 以动画方式进入 View 。

我可以正常工作，但由于某种原因，它停止工作了。我不知道这是否与我的代码有关，或者是否有更好的方法来完成这个项目。

    $(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>

Answer 1

看起来有些单引号变成了双引号。

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

我并不赞同这种定位方法，但您绝对不想寻找带有“+ theClass +”类的 div