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