在jQuery代码中简化隐藏和显示div

时间：2017-08-24 13:20:22

标签： jquery

我已经编写了一些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>

谢谢你们

3 个答案:

答案 0 :(得分：1)

是的，这是可能的。您可以使用ID（'#twitter-icon', '#facebook-icon'等）将所有元素附加到同一个类。然后将事件绑定到该类。让我们说你想要上课.icon。然后只需这样做：

$("body").on("click", ".icon", function(){
    $(this).fadeToggle();
    $(this).toggleClass('z-index-neg');
});

$(this)定位当前点击的元素。

希望这有帮助。

答案 1 :(得分：1)

您可以组合事件处理程序，并根据点击的图标ID

处理每个案例

＆＃13;
＆＃13; 
var icons = $('.social-icon').on('click', function() {
  var id = this.id.replace('icon', 'callout');
  var el = $('#' + id);
  $('.hero-callout').add(el).fadeToggle();
  icons.not(this).toggleClass('z-index-neg')
});

$('.close').on('click', function() {
  $(this).closest('div').fadeOut('slow');
  $('.hero-callout').fadeIn('slow');
  $('.social-icon').removeClass('z-index-neg');
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您正在寻找的技术称为“不要重复自己”或“干”。目标是对逻辑进行泛化，以便它可以应用于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>

相关问题
最新问题