jquery - 简化 jQuery 代码中的隐藏和显示 div

Question

我已经编写了一些 jQuery 代码，这些代码可以完成我正在寻找的工作，但对于 jQuery 来说相当陌生，我只是想知道是否有更简单的方法来完成它。它的主要作用就是在点击事件上隐藏和显示 div。

我尝试过一些不同的想法，但这似乎是我能够在点击事件上实现我想要的效果的唯一方法。

下面的标记。

$('#facebook-icon').click(function() {
  $('#facebook-callout, .hero-callout').fadeToggle();
  $('#twitter-icon, #linked-icon').toggleClass('z-index-neg');
});
$('#twitter-icon').click(function() {
  $('#twitter-callout, .hero-callout').fadeToggle();
  $('#facebook-icon, #linked-icon').toggleClass('z-index-neg');
});
$('#linked-icon').click(function() {
  $('#linked-callout, .hero-callout').fadeToggle();
  $('#facebook-icon, #twitter-icon').toggleClass('z-index-neg');
});

$('.close').click(function() {
  $(this).closest('div').fadeOut('slow');
  $('.hero-callout').fadeIn('slow');
  $('.social-icon').removeClass('z-index-neg');
});

a {
  text-decoration: none;
}

.hero-wrapper {
  position: relative;
}

.hero-callout {
  position: relative;
  height: 300px;
  text-align: center;
  margin-top: 150px;
}

.close {
  font-size: 25px;
  color: #151515;
  position: absolute;
  right: 0;
  top: -30px;
  cursor: pointer;
}

.social-callout {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: none;
}

.social-heading {
  color: #151515;
  font-size: 45px;
  text-transform: none;
  position: relative;
}

.z-index-neg {
  z-index: -1;
  opacity: 0 !important;
  -webkit-transition: .5s;
  transition: .5s;
}

.social-heading:after {
  content: "";
  background: #151515;
  height: 3px;
  width: 0;
  display: block;
  margin: 0 auto;
  -webkit-transition: width .5s;
  transition: width .5s;
}

.social-heading:hover:after {
  width: 100%;
  -webkit-transition: width .5s;
  transition: width .5s;
}

#social-icons {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.social-icon {
  position: relative;
  color: #151515;
  font-size: 18px;
  opacity: 1;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
  display: inline-block;
  padding: 0 10px;
}

.icons:hover {
  opacity: 0.5;
  -webkit-transition: .3s;
  transition: .3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hero-wrapper">
  <div class="hero-callout">
    <h2>
      Hello World
    </h2>
  </div>
  <div class="social-callout" id="facebook-callout">
    <a href="#">
      <h2 class="social-heading">Facebook.</h2>
    </a>
    <span class="close">X</span>
  </div>
  <div class="social-callout" id="twitter-callout">
    <a href="#">
      <h2 class="social-heading">Twitter.</h2>
    </a>
    <span class="close">X</span>
  </div>
  <div class="social-callout" id="linked-callout">
    <a href="#">
      <h2 class="social-heading">Linked In.</h2>
    </a>
    <span class="close">X</span>
  </div>
  <div id="social-icons">
    <span class="social-icon" id="facebook-icon">Facebook</span>
    <span class="social-icon" id="twitter-icon">Twitter</span>
    <span class="social-icon" id="linked-icon">Linked In</span>
  </div>
</div>

谢谢大家

Answer 1

您正在寻找的技术称为“不要重复自己”或“DRY”。目标是通用化逻辑，以便它可以应用于 DOM 中的任何相关元素，只要它遵循预期的结构即可。

在这种情况下，您可以将 data 属性添加到 .social-icon 元素，该元素指定 的 id。 Social-callout 元素与它们相关，应在单击时使用。

遵循此模式意味着您现在可以拥有无​​限数量的 .social-icon 元素以及关联的 .social-callouts，而无需修改您的 JS 代码:

$('.social-icon').click(function() {
  var $target = $($(this).data('target'));
  $target.add('.hero-callout').fadeToggle();
  $('.social-icon').not(this).toggleClass('z-index-neg');
})

$('.close').click(function() {
  $(this).closest('div').fadeOut('slow');
  $('.hero-callout').fadeIn('slow');
  $('.social-icon').removeClass('z-index-neg');
});

a {
  text-decoration: none;
}

.hero-wrapper {
  position: relative;
}

.hero-callout {
  position: relative;
  height: 300px;
  text-align: center;
  margin-top: 150px;
}

.close {
  font-size: 25px;
  color: #151515;
  position: absolute;
  right: 0;
  top: -30px;
  cursor: pointer;
}

.social-callout {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: none;
}

.social-heading {
  color: #151515;
  font-size: 45px;
  text-transform: none;
  position: relative;
}

.z-index-neg {
  z-index: -1;
  opacity: 0 !important;
  -webkit-transition: .5s;
  transition: .5s;
}

.social-heading:after {
  content: "";
  background: #151515;
  height: 3px;
  width: 0;
  display: block;
  margin: 0 auto;
  -webkit-transition: width .5s;
  transition: width .5s;
}

.social-heading:hover:after {
  width: 100%;
  -webkit-transition: width .5s;
  transition: width .5s;
}

#social-icons {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.social-icon {
  position: relative;
  color: #151515;
  font-size: 18px;
  opacity: 1;
  -webkit-transition: .5s;
  transition: .5s;
  cursor: pointer;
  display: inline-block;
  padding: 0 10px;
}

.icons:hover {
  opacity: 0.5;
  -webkit-transition: .3s;
  transition: .3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hero-wrapper">
  <div class="hero-callout">
    <h2>
      Hello World
    </h2>
  </div>
  <div class="social-callout" id="facebook-callout">
    <a href="#">
      <h2 class="social-heading">Facebook.</h2>
    </a>
    <span class="close">X</span>
  </div>
  <div class="social-callout" id="twitter-callout">
    <a href="#">
      <h2 class="social-heading">Twitter.</h2>
    </a>
    <span class="close">X</span>
  </div>
  <div class="social-callout" id="linked-callout">
    <a href="#">
      <h2 class="social-heading">Linked In.</h2>
    </a>
    <span class="close">X</span>
  </div>
  <div id="social-icons">
    <span class="social-icon" id="facebook-icon" data-target="#facebook-callout">Facebook</span>
    <span class="social-icon" id="twitter-icon" data-target="#twitter-callout">Twitter</span>
    <span class="social-icon" id="linked-icon" data-target="#linked-callout">Linked In</span>
  </div>
</div>