javascript - 如何使jquery脚本更短？ | 如何使jquery脚本更短

我有以下代码（我将其缩短以使其更具可读性）
我想问一下是否有可能不为每个按钮编写几乎相同的代码吗？我该怎么做最简单的方法？我有6个按钮，代码会很长。

<script>
    $(document).ready(function(){
        $("#option1").click(function(){
            if($(".option1").is(":visible")){
                $(".option1").hide("slow",function(){});
            }
            else{
                $(".option2, .option3").hide("slow",function(){});
                $(".option1").show("slow",function(){});
            }
        });
        $("#option2").click(function(){
            if($(".option2").is(":visible")){
                $(".option2").hide("slow",function(){});
            }
            else{
                $(".option1, .option3").hide("slow",function(){});
                $(".option2").show("slow",function(){});
            }
        });
        $("#option3").click(function(){
            if($(".option3").is(":visible")){
                $(".option3").hide("slow",function(){});
            }
            else{
                $(".option1, .option2").hide("slow",function(){});
                $(".option3").show("slow",function(){});
            }
         });
    });
</script>
<body>
    <div class="containter">
        <div class="row">
            <div class="col-md-4">
                <button type="button" id="option1" class="btn btn-primary">Button1 >></button>
            </div>
            <div class="col-md-4">
                <button type="button" id="option2" class="btn btn-primary">Button2 >></button>
            </div>
            <div class="col-md-4">
                <button type="button" id="option3" class="btn btn-primary">Button3 >></button>
            </div>
        </div>
    </div>
</body>

最佳答案

您可以将代码减少为一键式侦听器。尝试这个：

<script>
$(document).ready(function() {
    $(".btn-primary").click(function() {
        var option = $(this).data("option");
        if ($(".option." + option).is(":visible")) {
            $(".option." + option).hide("slow", function() {});
        } else {
            $(".option").not("." + option).hide("slow", function() {});
            $(".option." + option).show("slow", function() {});
        }
    });
});
</script>
<body>
    <div class="containter">
        <div class="row">
            <div class="col-md-4">
                <button type="button" id="option1" data-option="option1" class="btn btn-primary">Button1 >></button>
            </div>
            <div class="col-md-4">
                <button type="button" id="option2" data-option="option2" class="btn btn-primary">Button2 >></button>
            </div>
            <div class="col-md-4">
                <button type="button" id="option3" data-option="option3" class="btn btn-primary">Button3 >></button>
            </div>
        </div>
    </div>
<!-- common class option added -->
    <div class="options">
        <div class="option option1"></div>
        <div class="option option2"></div>
        <div class="option option3"></div>
    </div>
</body>

我为所有选项添加了一个通用类，并为按钮添加了data-option属性。

关于javascript - 如何使jquery脚本更短？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32828191/