0

各メニュー項目にクラスがあるメニューがあります。

<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
            });
});

私がそれを機能させることができれば、素晴らしいです。それとももっとエレガントな方法がありますか？

4

2 に答える 2

2

$youPicked変数の二重引用符は必要ありません。次のようにコードを書き直すことができます。

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

ところで、絶対配置を行う必要があるかどうかは疑問です。最初はなしで試してください。

于 2012-09-04T08:11:05.580 に答える
0

次のように直接行うことができます。

$('#nav li ul li').click(function(){
    $(this).css('position', 'absolute');
    $(this).fadeTo('slow',1, function(){
         //fadeIn complete
    });
});
于 2012-09-04T08:09:54.980 に答える