Блог

В настоящее время я изучаю jquery и столкнулся с проблемой. Я работаю над созданием страницы с двумя разделами. Одним из них является неупорядоченный список типов продуктов питания. Другой представляет собой набор разделов, в каждом из которых отображаются разные виды пива, которые дополняют каждый из видов пищи. Каждый элемент списка и соответствующий ему div имеют один и тот же класс. Все divs расположены вне поля зрения для запуска.

Чего я хочу добиться, так это того, что при нажатии на каждый элемент списка любой элемент, находящийся в поле зрения, анимируется вне поля зрения, а затем соответствующий 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;amp; Spicy</li>
            <li class="rich_hearty">Rich amp;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>
 

Похоже, что некоторые одинарные кавычки превратились в двойные кавычки.

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

Я не одобряю этот метод таргетинга, но вы определенно не хотите искать div с классом » TheClass »