在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

你正在寻找被称为不重复自己的技术，或干。目标是将逻辑通用化，以便它可以应用于DOM中的任何相关元素，只要它符合预期的结构。

在这种情况下，可以一data属性添加到.social-icon元件，其指定.social-callout元件的id涉及它们和点击时应该使用。

按照这个模式意味着您现在可以有相关的.social-callouts.social-icon元素的无限数量而没有需要修改你的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>

Answer 2

是的，它是可能的。您可以将同一个类附加到所有具有ID的元素（'#twitter-icon', '#facebook-icon'等）。然后将事件绑定到该类。比方说你想把类.icon。然后，只需做到这一点：

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

凡$(this)目标的当前点击的元素。

希望这会有所帮助。

Answer 3

你可以结合事件处理程序和处理基础上，点击图标ID每种情况下

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

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>