jQuery：需要帮助隐藏以前查看过的元素

Question

拜托，请客气，我只是在学习如何编码...

我使用 'hide' 和 'show' 构建了一个简单的相册页面，以便在不同的相册之间导航。但是，我运行遇到了一个问题，无法 'clear' 之前查看过的上一张相册中的照片。

这是一个显示我的问题的短视频：http://screencast.com/t/RrA0bygQm

在我的 index.html 和 main.js 页面中，我有以下用于隐藏和显示相关相册的代码：

$(".albums-nav a").on("click", function(e) {
    var target = $(this);
    var targetName = target.attr("href");

    $(targetName).addClass("active");
    $(targetName).show();


    $('.album-containers').hide();
    $('.albums-nav').show();

});

<!-- adding the side menu nav -->
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-lg-3 sidemenu">
            <div class="list-group albums-nav" id="albums-nav">
                <a href="#album1-photos" class="list-group-item">Album 1</a>
                <a href="#album2-photos" class="list-group-item">Album 2</a>
                <a href="#album3-photos" class="list-group-item">Album 3</a>
                <a href="#album4-photos" class="list-group-item">Album 4</a>
                <a href="#album5-photos" class="list-group-item">Album 5</a>
                <a href="#album6-photos" class="list-group-item">Album 6</a>
            </div>
        </div>  

        <div class="col-xs-12 col-lg-9 albums">
            <section id="album1-photos" class="album1-photos">
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 1</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 2</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 3</h3>
                    </div>          
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 4</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 5</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 6</h3>
                    </div>  
                </div>
            </section>

我的想法是向目标添加一个新的 class ("active") 并在没有它的情况下隐藏所有其他元素，但我很难弄清楚如何做到这一点.

建议？

Answer 1

尝试

css

/* set `.albums [id^=album]` to `display:none` */
.albums [id^=album] {
  display:none;
}

js

$(".albums-nav a").on("click", function(e) {
  // hide all `.album`
  $(".albums [id^=album]").hide();
  // show `target` `.album`
  $($(this).attr("href")).show();
});

$(".albums-nav a").on("click", function(e) {
  $(".albums [id^=album]").hide();
  $($(this).attr("href")).show();

});

.albums [id^=album] {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-lg-3 sidemenu">
            <div class="list-group albums-nav" id="albums-nav">
                <a href="#album1-photos" class="list-group-item">Album 1</a>
                <a href="#album2-photos" class="list-group-item">Album 2</a>
                <a href="#album3-photos" class="list-group-item">Album 3</a>
                <a href="#album4-photos" class="list-group-item">Album 4</a>
                <a href="#album5-photos" class="list-group-item">Album 5</a>
                <a href="#album6-photos" class="list-group-item">Album 6</a>
            </div>
        </div>  

        <div class="col-xs-12 col-lg-9 albums">
            <section id="album1-photos" class="album1-photos">
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 1</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 2</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 3</h3>
                    </div>          
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 4</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album1.jpg" class="img-responsive">
                        <h3>Photo 5</h3>
                    </div>      
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <img src="img/album2.jpg" class="img-responsive">
                        <h3>Photo 6</h3>
                    </div>  
                </div>
            </section>
          </div>
      </div>

jQuery：需要帮助隐藏以前查看过的元素

jQuery: need help hiding previously viewed element(s)

jquery

show

hide

show-hide