Javascript 如何缩短jquery脚本？_Javascript_Jquery_Button

Javascript 如何缩短jquery脚本？

javascript jquery button

Javascript 如何缩短jquery脚本？,javascript,jquery,button,Javascript,Jquery,Button,我有以下代码（我缩短了它使它更可读）我想问一下，是否有可能不为每个按钮编写几乎相同的代码？我怎样才能用最简单的方法来做呢？我有6个按钮和代码将是相当长的 <script> $(document).ready(function(){ $("#option1").click(function(){ if($(".option1").is(":visible")){ $(".option1").hide("s

我有以下代码（我缩短了它使它更可读）我想问一下，是否有可能不为每个按钮编写几乎相同的代码？我怎样才能用最简单的方法来做呢？我有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>


$（文档）.ready（函数（）{
$（“#选项1”）。单击（函数（）{
如果（$（“.option1”）是（“：可见”））{
$（“.option1”）.hide（“慢”，function（）{}）；
}
否则{
$（.option2.option3”）.hide（“slow”，function（）{}）；
$（“.option1”）.show（“慢”，function（）{}）；
}
});
$（“#选项2”）。单击（函数（）{
如果（$（“.option2”）是（“：可见”））{
$（“.option2”）.hide（“slow”，function（）{}）；
}
否则{
$（.option1.option3”）.hide（“slow”，function（）{}）；
$（“.option2”）.show（“慢”，function（）{}）；
}
});
$（“#选项3”）。单击（函数（）{
如果（$（“.option3”）是（“：可见”））{
$（“.option3”）.hide（“慢”，function（）{}）；
}
否则{
$（.option1.option2”）.hide（“slow”，function（）{}）；
$（“.option3”）.show（“慢”，function（）{}）；
}
});
});
按钮1>>
按钮2>>
按钮3>>

无需更改大部分html，在所有选项1、选项2等中添加一个公共类

选项

：

<div class ="option option1">a</div>
<div class ="option option2">b</div>
<div class ="option option3">c</div>

您可以将代码简化为只需单击一次。试试这个：

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


$（文档）.ready（函数（）{
$（“.btn主”）。单击（函数（）{
var option=$（this）.data（“option”）；
如果（$（.option.+option）.is（“：可见”））{
$（.option.+option.hide（“slow”，function（）{}）；
}否则{
$（“.option”）.not（“.”+option）.hide（“slow”，function（）{}）；
$（.option.+option.show（“slow”，function（）{}）；
}
});
});
按钮1>>
按钮2>>
按钮3>>

我为所有选项添加了一个公共类，并为按钮添加了一个数据选项属性。

您无需检查当前按钮是否可见。它是可见的，因为它刚刚被点击

您所需要做的就是显示其他未单击的按钮并隐藏已单击的按钮。为此，将同一类分配给所有3个按钮。在下面的示例中，我将类“myBtn”添加到所有3个按钮中

$(".myBtn").click(function () {
   var id = $(this).attr('id');
   $(".myBtn:not(#"+id+")").show("slow", function () {});
   $(this).hide();
});

演示。

您有JSFIDLE吗？我想说的是，将您的if/else语句放入函数中，并传入类名。附带说明：您当前的代码正在查找类，但您没有在html中定义这些类。它们是id。这看起来很棒，只是出于好奇，为什么混合使用jQuery和原生JS而不是一个或另一个呢？我本来可以用纯javascript自己完成，但我想使用

hide

和

show

让OP看到@mituw16，虽然你完全正确，但其中一个会更好。

$(".myBtn").click(function () {
   var id = $(this).attr('id');
   $(".myBtn:not(#"+id+")").show("slow", function () {});
   $(this).hide();
});