根據所選課程淡入圖像

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> 

我也有一系列的圖像，生活在唯一的div與在菜單中的類相同的id。他們不透明.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 
    }); 
});