Question

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

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

我尝试使用toggle（），toggleClass（）而不是（）但没有成功。任何的想法？感谢

Answer 1

您可以在此处使用 not() 来避免选择器中的点击元素

＆＃13;

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
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

你不需要复杂的jQuery。使用css设置样式并在根元素上切换单个类。

CSS

.spec.active .image {
  display: none;
}
.spec.active .details-spec {
  display: block;
}
.spec.active .block-content {
  color: white;
}

的JavaScript

var $spec = $('.spec');

$spec.click(function() {
  $spec.not($(this)).removeClass('active');
  $(this).toggleClass('active');
});

DEMO：http://codepen.io/anon/pen/VvpXXe

Answer 3

首先关闭所有（$ spec）。第二个开放电流。（$ this）

var $spec = $(".spec").click(function() {
    $spec.find(".image, .details-spec").show();
  $spec.find(".block-content").removeClass('white');
  $(this).find(".image, .details-spec").hide();
  $(this).find(".block-content").addClass('white');
});

jquery只显示1个活动元素

3 个答案: