javascript - jquery 仅显示 1 个事件元素

Question

我创建了这段代码，点击图片，你会在图片下方看到描述。我想改进这段代码，所以我想一次只激活一个描述，所以如果我点击一张图片，就会看到刚刚点击的描述，并隐藏最后激活的。也许代码更清楚http://codepen.io/mp1985/pen/qOrpQX

$( ".spec").click(function() {
    $(this).find(".image, .details-spec").toggle();
    $(this).find(".block-content").toggleClass('white'); 
 });

我尝试使用 toggle()、toggleClass() 和 not() 但没有成功。任何想法？谢谢

Answer 1

您可以使用 not() 在这里避免从选择器中点击元素

var $spec = $(".spec").click(function() {
// caching selector $(".spec") for future use
  $spec
    .not(this)
    //  avoiding clicked element
    .find(".image")
    // getting image selector
    .show()
    // showing back image
    .end()
    // back to previous selector
    .find(".details-spec")
    // getting details
    .hide()
    // hiding it
    .end()
    // back to previous selector
    .find(".block-content")
    //  getting block content
    .removeClass('white');
  // removing class white
  $(this)
    .find(".image, .details-spec")
    // getting elements by class
    .toggle()
    // toggling visibility
    .end()
    // back to previous selector  
    .find(".block-content")
    // getting block content    
    .toggleClass('white');
  // toggling class  white
});

.block {
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  background: #f9bda1;
  margin-bottom: 1em;
}
.one-thirds > .block {
  background-color: #484343;
  cursor: pointer;
}
.block .image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.one-thirds {
  width: 32%;
  float: left;
  margin-right: 1%;
}
.full {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
h3 {
  font-size: 20px;
}
.details-spec {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.white {
  color: white;
}
.active > .image {
  visibility: hidden;
}
.active .details-spec {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class='one-thirds'>
    <div class="block square spec">
      <div class="full image" style="background-image:url('http://lorempixel.com/300/300/');"></div>
      <div class="block-content full">
        <h3>Title:</h3>
        <div class="details-spec">

          Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem
        </div>

      </div>
    </div>
  </div>

  <div class='one-thirds'>
    <div class="block square spec">
      <div class="full image" style="background-image:url('http://lorempixel.com/300/300/sports/1/');"></div>
      <div class="block-content full">
        <h3>Title:</h3>
        <div class="details-spec">
          Lorem Lorem Lorem Lorem LoremLorem Lorem Lorem Lorem Lorem LoremLorem

        </div>
      </div>
    </div>
  </div>

  <div class='one-thirds last'>
    <div class="block square spec">
      <div class="full image" style="background-image:url('http://lorempixel.com/300/300/sports/3/');"></div>
      <div class="block-content full">
        <h3>Title:</h3>

        <div class="details-spec">

          Lorem Lorem Lorem Lorem LoremLorem
        </div>
      </div>
    </div>
  </div>
</div>