Question

点击“显示/隐藏提交”按钮后，需要显示和隐藏“提交”按钮。我的代码正在运行但有更好的方法[单独使用Javascript部分]

<style type="text/css">
    .displayNone{
        display : none;
    }
    </style>



    <button id="sub" >Submit</button>
    <button id="control">Show/Hide Submit</button>

    <script type="text/javascript">

    $( document ).ready(function() {
        $("#control").click(function(){
        if($("#sub").attr("class") == "displayNone"){
            $("#sub").attr("class","")
        }
        else{
            $("#sub").attr("class","displayNone")
        }

        }); 
    });
    </script>

Answer 1

希望您不了解.toggleClass()预定义方法:)尝试以下代码

$( document ).ready(function() {
    $("#control").click(function(){
    $("#sub").toggleClass("displayNone");
    }); 
});

Answer 2

作为@ Nofi答案的可能改进，您可以缓存＆＃34;＃sub＆＃34;点击之间的jQuery对象:)（它可以节省你每次都要找到的元素）

$( document ).ready(function() {
    var $sub = $('#sub');
    $("#control").click(function(){
       $sub.toggleClass("displayNone");
    }); 
});

Answer 3

您可以使用jQuery的toggle方法显示或隐藏#sub按钮：

$(function() {
    $("#control").click(function(){
        $("#sub").toggle();
    }); 
});

当不带参数调用时，此方法只显示或隐藏匹配的元素，即切换元素当前的可见性状态。

Answer 4

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
    .displayNone{
        display : none;
    }
    </style>
<script>

    $(document).ready(function () {
        $("#control").click(function () {
            $('#sub').toggleClass("displayNone");

        });
    });
</script>
</head>
<body>
<button id="sub" >Submit</button>
    <button id="control">Show/Hide Submit</button>

</body>
</html>

Answer 5

要提供一个与字面上的每个人不同的解决方案

$( document ).ready(function() {
    var $sub = $('#sub');

    $("#control").click(function(){
        $sub.attr("class") == "displayNone" ? 
        $sub.attr("class","") : $sub.attr("class","displayNone")
    })
});

是的，您可以使用toggle()或toggleClass()，但如果还有另一个点来测试#sub是否包含该类，则可能?:是“更好的“解决方案？”

Answer 6

您也可以尝试fadeIn和fadeOut Demo here

 $(document).ready(function () {
        $("#control").click(function () {

        if($("#control").hasClass("yoyo"))
        {
         $('#sub').fadeIn(700);
            $("#control").removeClass("yoyo");

        }
        else
        {
        $('#sub').fadeOut(700);
            $("#control").addClass("yoyo");

        }


        });
    });

在按钮上应用/删除Css

6 个答案: