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

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

    });
});

Answer 2

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

$ .each Jquery工作但是

2 个答案: