$。每jQuery的工作，但

Question

我有以下簡單的代碼：

<div id="albumTitle"> 
    <ul> 
     <li id="albumTitle1" class="selected"><a onClick="showAlbum('#albumTitle1','#album1')">Album One</a></li> 
     <li id="albumTitle2"><a onClick="showAlbum('#albumTitle1','#album1')">Album Two</a></li> 
     <li id="albumTitle3"><a onClick="showAlbum('#albumTitle1','#album1')">Album Three</a></li> 
    </ul> 
</div> 

現在專輯本身

<div id="albums"> 

    <div id="album1"> 
    <ul> 
     <li><img src="img/image1.png" /></li> 
     <li><img src="img/image2.png" /></li> 
     <li><img src="img/image3.png" /></li> 
    </ul> 
    </div> 
    <div id="album2" class="inactive"> 
    <ul> 
     <li><img src="img/image1.png" /></li> 
     <li><img src="img/image2.png" /></li> 
     <li><img src="img/image3.png" /></li> 
    </ul> 
    </div> 
    <div id="album3" class="inactive"> 
    <ul> 
     <li><img src="img/image1.png" /></li> 
     <li><img src="img/image2.png" /></li> 
     <li><img src="img/image3.png" /></li> 
    </ul> 
    </div> 

</div> 

所以這裏就是我想要的......

簡單地說，當我點擊一個專輯，「選定」類將轉到該專輯標題，並刪除先前「選定」的專輯類。

同樣，當選擇ALBUM時，「非活動」類被「添加」到先前選擇的專輯，並從新選擇的專輯中「刪除」。

下面是現在的代碼：

<script language="javascript" type="text/javascript"> 

    function showAlbum(albTitle, albName) { 
     var obj = new Array(); 

     for (var x = 1; x <= 3; x++) { 
      obj.push("album" + x); 
     } 

     $.each(obj, function (key, value) { 
      //alert(key + ": " + value); 
      if ($("#" + value).hasClass("inactive")) { 
       $("#" + value).removeClass("inactive"); 
       $("#" + albTitle).removeClass("selected"); 
      } else { 
       $("#" + value).addClass("inactive"); 
       $("#" + albTitle).addClass("selected"); 
      } 
     }); 
    } 

</script> 

Answer 1

我沒有改變HTML，它是相同的就像你原來的帖子一樣。

HTML：

<div id="albumTitle"> 
    <ul> 
     <li id="albumTitle1" class="selected"><a onClick="showAlbum('#albumTitle1','#album1')">Album One</a></li> 
     <li id="albumTitle2"><a onClick="showAlbum('#albumTitle2','#album2')">Album Two</a></li> 
     <li id="albumTitle3"><a onClick="showAlbum('#albumTitle3','#album3')">Album Three</a></li> 
    </ul> 
</div> 
<div id="albums"> 

    <div id="album1"> 
    <ul> 
     <li><img src="img/image1.png" /></li> 
     <li><img src="img/image2.png" /></li> 
     <li><img src="img/image3.png" /></li> 
    </ul> 
    </div> 
    <div id="album2" class="inactive"> 
    <ul> 
     <li><img src="img/image1.png" /></li> 
     <li><img src="img/image2.png" /></li> 
     <li><img src="img/image3.png" /></li> 
    </ul> 
    </div> 
    <div id="album3" class="inactive"> 
    <ul> 
     <li><img src="img/image1.png" /></li> 
     <li><img src="img/image2.png" /></li> 
     <li><img src="img/image3.png" /></li> 
    </ul> 
    </div> 

</div> 

的JavaScript：

function showAlbum(albTitle, albName) { 
     $('#albumTitle>ul>li.selected').removeClass('selected'); 
     $(albTitle).addClass('selected'); 
     $('#albums>div').addClass('inactive'); 
     $(albName).removeClass('inactive'); 
} 

CSS：

.selected 
{ 
    background-color:blue;  
} 
.inactive 
{ 
    background-color:yellow;  
} 

演示：http://jsfiddle.net/uxZA7/

Answer 2

你有一些邏輯錯誤，其中第一個是你的ID的眼前掠過#，再加入另一#在你的選擇。理想的情況是，雖然，這樣的事情會是一個更好的解決方案，避免了內聯事件處理程序：

http://jsfiddle.net/fwmJZ/

<div id="albumTitle"> 
    <ul> 
     <li class="album-title" data-album-id="1">Album One</li> 
     <li class="album-title" data-album-id="2">Album Two</li> 
     <li class="album-title" data-album-id="3">Album Three</li> 
    </ul> 
</div> 

<div id="albums"> 

    <div class="album" data-album-id="1"> 
    <ul> 
     <li><img src="img/image1.png" /></li> 
     <li><img src="img/image2.png" /></li> 
     <li><img src="img/image3.png" /></li> 
    </ul> 
    </div> 
    <div class="album" data-album-id="2"> 
    <ul> 
     <li><img src="img/image1.png" /></li> 
     <li><img src="img/image2.png" /></li> 
     <li><img src="img/image3.png" /></li> 
    </ul> 
    </div> 
    <div class="album" data-album-id="3"> 
    <ul> 
     <li><img src="img/image1.png" /></li> 
     <li><img src="img/image2.png" /></li> 
     <li><img src="img/image3.png" /></li> 
    </ul> 
    </div> 

</div> 

...

$(document).ready(function() { 
    $('.album-title').click(function(e) { 
     e.preventDefault(); 
     $('.album-title').removeClass('active'); 
     $(this).addClass('active'); 

     $('.album').removeClass('active'); 
     $('.album[data-album-id='+ $(this).data('album-id') + ']').addClass('active'); 

    }); 
});