Как я могу реорганизовать этот код javascript?

Question

при нажатии на коробки (это телекоммуникация, масло & газ и выпечка), я хочу показать и скрыть содержимое в div (динамический контент).

Пожалуйста, проверьте HTML-код

changeContent:function(){ 
 
\t \t $('.it-telecom-content').show(); 
 
\t \t $(document).on('click',".it-telecom",function(){ 
 
\t \t \t $('.banking-content , .oil-gas-content').hide(); \t \t \t 
 
      $('.it-telecom-content').show(); 
 
\t \t }); 
 
\t \t $(document).on('click',".banking",function(){ 
 
\t \t \t $('.it-telecom-content,.oil-gas-content').hide(); 
 
      $('.banking-content').show(); 
 
\t \t }); 
 
\t \t $(document).on('click',".oil-gas",function(){ 
 
\t \t \t $('.it-telecom-content,.banking-content').hide(); 
 
      $('.oil-gas-content').show(); 
 
\t \t }); 
 
\t } 
 
    here in changeContent function , I have written three click function ,  **how I can write one generic function to achieve this.**

.industries-section .dynamic-content{ 
 
    padding: 0 0 40px 0; 
 
    /*border-bottom: 2px solid #f8b412;*/ 
 
} 
 
.industries-section .oil-gas-content{ 
 
    display:none; 
 
} 
 
.industries-section .it-telecom-content{ 
 
    display:none; 
 
} 
 
.industries-section .banking-content{ 
 
    display:none; 
 
}

<div class="row"> 
 
        <div class="col-md-4 col-lg-4">&nbsp;</div> 
 
        <div class="col-md-4 col-lg-4">&nbsp;</div> 
 
        <div class="col-md-4 col-lg-4">       
 
         <div class="dynamic-content it-telecom-content option animated fadeInRight"> 
 
          <p class="subtitle">We enable , encourage and elevate tailor made, recruitment services across various Telecom services</p> 
 
          <p>we achieve excellence by consistently recruiting right person ar the right time with he highest degree of integrity an self belief</p> 
 
          <a href="#">LEARN MORE <i class="fa fa-long-arrow-right" aria-hidden="true"></i> 
 
          </a> 
 
         </div> 
 
         <div class="dynamic-content oil-gas-content option animated fadeInRight"> 
 
          <p class="subtitle">We enable , encourage and elevate tailor made, recruitment services across various Oil & Gas services</p> 
 
          <p>we achieve excellence by consistently recruiting right person ar the right time with he highest degree of integrity an self belief</p> 
 
          <a href="#">LEARN MORE <i class="fa fa-long-arrow-right" aria-hidden="true"></i> 
 
          </a> 
 
         </div> 
 
         <div class="dynamic-content banking-content option animated fadeInRight"> 
 
          <p class="subtitle">We enable , encourage and elevate tailor made, recruitment services across various Banking services</p> 
 
          <p>we achieve excellence by consistently recruiting right person ar the right time with he highest degree of integrity an self belief</p> 
 
          <a href="#">LEARN MORE <i class="fa fa-long-arrow-right" aria-hidden="true"></i> 
 
          </a> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="row below-content">     
 
        <div class="col-md-4 col-lg-4"> 
 
         <div class="it-telecom"> 
 
          <h1>IT & Telecom</h1> 
 
          <p>IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom </p> 
 
         </div> 
 
        </div> 
 
        <div class="col-md-4 col-lg-4"> 
 
         <div class="oil-gas"> 
 
          <h1>Oil & Gas</h1> 
 
          <p>Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas</p> 
 
         </div> 
 
        </div> 
 
        <div class="col-md-4 col-lg-4"> 
 
         <div class="banking"> 
 
          <h1>Banking</h1> 
 
          <p>Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking</p> 
 
         </div> 
 
        </div> 
 
       </div>

Как реорганизовать приведенный выше код? Если вам нужно больше разъяснений, я могу добавить некоторые.

Answer 1

Добавить класс active, чтобы узнать, где отображаются данные. Затем добавьте атрибут data-content и сохраните его в классе div с его информацией. Затем, когда вы нажмете на ящик (IT, OIL и т. Д.), Скройте окно активной информации и покажите корреспонденту в щелчке.

// by default just show the first box 
 
$('.container div:not(.active)').fadeOut(0); 
 

 
$('.left div').on('click', function() { 
 
\t // remove active class and hide the box 
 
    $('.container div.active').removeClass('active').fadeOut(500); 
 
    // extract the clicked box data-content attribute, 
 
    // select it and show up 
 
\t const clazz = $(this).attr('data-content'); 
 
    window.setTimeout(() => $(`.${clazz}`).addClass('active').fadeIn(500), 250); 
 
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600); 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    align-items: center; 
 
    border-right: 2px solid #ddd; 
 
    display: flex; 
 
    height: 100vh; 
 
    justify-content: space-between; 
 
    overflow: auto; 
 
    padding: 1rem 2rem; 
 
    width: 60%; 
 
} 
 

 
.right { 
 
    height: 100vh; 
 
    text-align: center; 
 
    width: 40%; 
 
} 
 

 
.left div { 
 
    background-color: gold; 
 
    color: #444; 
 
    cursor: pointer; 
 
    font-family: 'open sans'; 
 
    height: 130px; 
 
    line-height: 130px; 
 
    text-align: center; 
 
    width: 130px; 
 
} 
 

 
.container { 
 
    border: 1px solid #ccc; 
 
    height: 200px; 
 
    margin: 40px auto; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
.container div { 
 
    background-color: white; 
 
    height: 100%; 
 
    left: 0; 
 
    padding: 10px; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
p { 
 
    color: #444; 
 
    font-family: 'open sans'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="left"> 
 
    <div class="it-telecom" data-content='it-telecom-content'> 
 
    IT & TELECOM 
 
    </div> 
 
    <div class="oil-gas" data-content='oil-gas-content'> 
 
    OIL & GAS 
 
    </div> 
 
</section> 
 

 
<section class="right"> 
 
    <div class="container"> 
 
    <div class="it-telecom-content active"> 
 
     <p> 
 
     this is the description for it & telecom 
 
     </p> 
 
    </div> 
 
    <div class="oil-gas-content"> 
 
     <p> 
 
     this is the description for oil & gas 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
</section>