我目前正在学习jquery,遇到了一个障碍。我正在构建一个包含两个部分的页面。一种是食物种类的无序列表。另一个是一组div,每个div显示不同类型的啤酒,以补充每种食物类型。每个列表项及其对应的div共享同一个类。所有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 & Spicy</li>
<li class="rich_hearty">Rich & 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 +"