Question

我有以下代码（我将其缩短以使其更具可读性）我想问一下，是否有可能不为每个按钮编写几乎相同的代码？我怎样才能以最简单的方式做到这一点？我有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>

Answer 1

无需更改大部分HTML，请在所有option1，option2，...中添加公共类option：

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

然后您可以使用以下内容：

Array.from(document.getElementsByTagName('button')).forEach(function(btn){
    btn.addEventListener('click', function(e){
        if($("." + e.target.id).is(":visible")){
                $("." + e.target.id).hide("slow",function(){});
            }
        else{
                $(".option").hide("slow",function(){});
                $("." + e.target.id).show("slow",function(){});
            }
    });
});

DEMO

Answer 2

您可以将代码缩减为只有一个点击侦听器。试试这个：

<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属性。

Answer 3

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

您需要做的就是显示没有点击的其他按钮并隐藏那个按钮。为此，请为所有3个按钮指定相同的类。在下面的例子中，我添加了类＆＃34; myBtn＆＃34;所有3个按钮。

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

JSFiddle演示。

如何缩短jquery脚本？

3 个答案: