jquery - 根据所选类别淡入图像

Question

我有一个菜单，其中每个菜单项都有一个类。

<ul id="nav">
    <li><a href="#" class="selected">Choose a team</a>
        <ul>
            <li class="ari">Arizona Cardinals</li>
            <li class="atl">Atlanta Falcons</li>
        </ul>
    </li>
</ul>

我还有一系列图像，它们存在于具有与菜单中的类相同的 id 的唯一 div 中。它们的不透明度为 0.25 开始。

<div id="ari" class="teamChart"></div>
<div id="atl" class="teamChart"></div>

当我在菜单中选择一个项目时，我试图使用类名来调用 id 名，以便我可以淡入它。像这样的东西......

$('#nav li ul li').click(function(){
    $youPicked = '"#'+$(this).attr('class')+'"';

            alert($youPicked); 
            //displays "#ari" when clicked.

            $($youPicked).css('position', 'absolute');
            //hopefully will bring it to front

            //hoping to fadeIn
            $($youPicked).fadeTo('slow',1, function(){
                  //fadeIn complete
            });
});

如果我能让它工作，那就太好了。或者也许有更优雅的方式？

Answer 1

$youPicked变量不需要双引号。您可以按如下方式重写代码。

$("#nav ul li").click(function() {
    var el = $("#" + this.className);
    el.css("position", "absolute");
    el.fadeTo("slow", 1, function() {
        //fadeIn complete
    });
});

顺便说一句，我怀疑是否需要进行绝对定位。先不试。

Answer 2

你可以直接这样做，

$('#nav li ul li').click(function(){
    $(this).css('position', 'absolute');
    $(this).fadeTo('slow',1, function(){
         //fadeIn complete
    });
});