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中。他们处于不透明状态.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
    });
});

根据所选的类淡入图像

2 个答案: