使 Jquery CSS 切换更容易

Question

我将使用下面的 sn-p 代码，为 12 个不同的按钮切换隐藏 og 显示 12 个不同的 div。

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

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

正如您可能想象的那样，复制和维护 12 个不同的 .click 事件，并编写相应的 12 行 css“切换”是相当笨拙的。

如何更轻松地进行编程？

我的思路是

步骤 A) 最初隐藏所有 div 步骤 B) 使用 switch 与单击的元素进行比较（如果可能）并将相应的 DIV 设置为 inline-block

这会是个好方法吗？

编辑：Codepen http://codepen.io/Ktraving/pen/KaWQbo

提前致谢，

编辑：目前正在研究这个解决方案/答案，但我得到一个“在每个案例陈述中都没有确定”。

        $(".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");

    };