Создание JQuery CSS Toggles проще

Question

Я буду использовать приведенный ниже фрагмент кода, для 12 различных кнопок, чтобы переключить скрытие и показать 12 разных div.

$("#klik_multimedia").click(function(){ 

    $(".datamatiker").css("display","none"); 
    $(".itdiplom").css("display","none");    
    $(".multimediedesigner").css("display","inline-block");     
    $(".sprogligstudent").css("display","none"); 
}); 

Как вы можете себе представить, копирование и mainting 12 различных событий .click, и писать соответствующие 12 строк CSS «тумблеры» довольно неуклюже.

Как я мог бы упростить программирование?

Я имею в виду, в линиях

стадии А) Первоначально скрыть все дивы Шаг B) С помощью переключателя для сравнения с щелкнул элементом (если это возможно) и установите соответствующий DIV на встроенный блок

Будет ли это хорошим способом?

EDIT: Codepen http://codepen.io/Ktraving/pen/KaWQbo

Спасибо заранее,

EDIT: В настоящее время работает над этим раствором/ответ, но я получаю сообщение об "unpexted определены в каждом случае заявление".

 $(".klik").click(function(){ // Vent på der bliver klikket på et element med klassen .klik 

      $("#oppehoejre").children().css("display","none"); // Skjul alle inderrammer i oppehoejre 
      $("#nedrevenstre").children().css("display","none"); // SKjul alle inderammer i nedrevenstre 

      var emne = $(this).attr('id'); 

      alert(emne); 

      switch (emne) {    // Switch til at vises kun det relevante indhold 

       Case 'klik_multimedia': 
        $(".multimedia").css("display","inline-block"); 
        break; 

       Case 'klik_student': 
        $(".sprogligstudent").css("display","inline-block"); 
        break;      

       Case 'klik_datamatiker': 
        $(".datamatiker").css("display","inline-block");      
        break;      

       Case 'klik_itdiplom': 
        $(".itdiplom").css("display","inline-block");     
        break;      

       default: 
        $(".multimedia").css("display","inline-block"); 
        break;      

      }; 

     }); 

Answer 1

Согласно вашему вопросу, я думаю, что это то, что вы ищете. Это может вам помочь. Here - это скрипка.

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    var n = $('button').index(this); 
 
    position = n + 1; 
 
    $("div").removeClass("display_me"); 
 
    $("div").addClass("display_none"); 
 
    $("div:nth-child(" + position + ")").removeClass("display_none"); 
 
    $("div:nth-child(" + position + ")").addClass("display_me"); 
 
    }); 
 
});

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: #fff; 
 
    font-size: 20px; 
 
    text-align: center; 
 
} 
 

 
.display_none { 
 
    display: none; 
 
} 
 

 
.display_me { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="display_none display_me">1</div> 
 
<div class="display_none">2</div> 
 
<div class="display_none">3</div> 
 
<div class="display_none">4</div> 
 
<div class="display_none">5</div> 
 
<div class="display_none">6</div> 
 
<button> 
 
    Click 1 
 
</button> 
 
<button> 
 
    Click 2 
 
</button> 
 
<button> 
 
    Click 3 
 
</button> 
 
<button> 
 
    Click 4 
 
</button> 
 
<button> 
 
    Click 5 
 
</button> 
 
<button> 
 
    Click 6 
 
</button>

Answer 2

Вы хотите что-то вроде этого

HTML:

<div id="klik_itdiplom">klik_itdiplom</div> 
<div id="klik_student">klik_student</div> 

JQuery:

$('#klik_student, #klik_itdiplom').on('click', function(){ 

$(".datamatiker").css("display","none"); 
    $(".itdiplom").css("display","none");    
    $(".multimediedesigner").css("display","inline-block");     
    $(".sprogligstudent").css("display","none"); 

}); 

jsFiddle

Answer 3

Наконец-то выяснилось.

Этот код позволит мне легко отображать/скрывать элементы намного проще, чем писать блок .click для каждого случая.

Теперь я могу расширить страницу с 8 дополнительными случаями, без лишних строк дополнительного кода.

$(".klik").click(function(){ // Vent på der bliver klikket på et element med klassen .klik 

    $("#oppehoejre").children().css("display","none"); // Skjul alle inderrammer i oppehoejre 
    $("#nedrevenstre").children().css("display","none"); // SKjul alle inderammer i nedrevenstre 

    var emne = $(this).attr('id'); 

    // alert(emne); // bruges kun ved debugging 

    switch (emne) {    // Switch til at vises kun det relevante indhold 

     case 'klik_multimedia': 
      $(".multimediedesigner").css("display","inline-block"); 
      break; 
     case 'klik_student': 
      $(".sprogligstudent").css("display","inline-block"); 
      break;      
     case 'klik_datamatiker': 
      $(".datamatiker").css("display","inline-block");      
      break;      
     case 'klik_itdiplom': 
      $(".itdiplom").css("display","inline-block");     
      break;      
     default: 
      $(".multimedia").css("display","inline-block"); 

    };