0

我有以下简单的代码：

<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>

所以这就是我想要的...

简单地说，当我单击一个专辑时，“已选择”类会转到该专辑标题，并且之前“已选择”类会被删除。

Likewise, when the ALBUM is selected, the "inactive" class is 'added' to the previously selected album and 'removed' from the newly selected 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>
4

2 回答 2

0

你有一些逻辑错误，第一个是#在你的 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');

    });
});
于 2013-09-16T14:13:25.917 回答
0

我没有更改 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/

于 2013-09-16T14:25:43.697 回答