Question

我知道我应该可以在一个功能中执行此操作。我有2个按钮，单击时显示2种不同的形式。当一个人被切换时，另一个人会隐藏。我现在就是这样做的。

$("#newaccount_form").hide();
$("#newuser_form").hide();

$(function(){
$("#newaccount").on("click", function(){
    if ($('#newuser_form').is(":visible"))
    {
        $("#newuser_form").hide("slow");
        $("#newaccount_form").slideToggle("slow");
    }
    else{
        $("#newaccount_form").slideToggle("slow");
    }
    });
});

$(function(){
$("#newuser").on("click", function(){
    if ($('#newaccount_form').is(":visible"))
    {
        $("#newaccount_form").hide("slow");
        $("#newuser_form").slideToggle("slow");
    }
    else{
        $("#newuser_form").slideToggle("slow");
    }
    });
});

如何将其转换为一个功能？如何使2个元素达到相同的功能？

Answer 1

可以匹配单击表单选择器的元素ID

var $forms = $("#newaccount_form, #newuser_form").hide();

$("#newaccount, #newuser").on("click", function(){
    var target_form = $('#' + this.id + '_form').slideToggle();
    $forms.not(target_form).slideUp(); // or hide()    
});

如果您使用特定动画而不是切换，则无需检查:visible。

的 DEMO

Answer 2

我们很快就会说你需要添加更多的div来显示/隐藏。您应该使用类作为选择器，并在显示按钮触发的那个之前隐藏所有div（或任何其他元素）。当你有这样的事情时：

<button class="toggle_btn" id="newaccount" data="newaccount_form">New Account</button>
<button class="toggle_btn" id="newuser" data="newuser_form">New User</button>

<div class="toggle red" id="newaccount_form"></div>
<div class="toggle blue" id="newuser_form"></div>

您可以一般地控制它：

$(function(){
    $("#newaccount_form").hide();
    $("#newuser_form").hide();

    $(".toggle_btn").click(function() {
        $(".toggle").hide("slow");
        var dataSelectorId = $(this).attr("data");
        if ($('#' + dataSelectorId).is(":hidden")) {
            $("#" + dataSelectorId).slideToggle("slow");
        }
    });
});

试试这个Fiddle

Answer 3

使用jQuery.data（）可以解决这个问题。所以，

$("#newaccount").click(function(){
    $(this).data('pressed', true);}
);

然后，您可以使用if语句检查任意值。然后你可以用if语句检查它。

Answer 4

$("#newaccount_form").hide();
$("#newuser_form").hide();

$(function(){
    $("#newaccount").on("click", show_new_form("#newaccount_form", "#newuser_form"));
    $("#newuser").on("click", show_new_form("#newuser_form", "#newaccount_form"));
    function show_new_form(new_form, current_form){
        return (function(){
            if ($(current_form).is(":visible"))
            {
                $(current_form).hide("slow");
            }
            $(new_form).slideToggle("slow");
        });
    }
});

Answer 5

试试这个

$("#newaccount_form").hide();
$("#newuser_form").hide();

$(function(){
$("#newaccount,#newuser").on("click", function(){
    if ($('#newuser_form').is(":visible"))
    {
        $("#newuser_form").hide("slow");
        $("#newaccount_form").slideToggle("slow");
    }
    else if ($('#newaccount_form').is(":visible"))
    {
         $("#newaccount_form").hide("slow");
         $("#newuser_form").slideToggle("slow");
    }
    else
    {
        $("#"+$(this).attr("id")+"_form").slideToggle("slow");
    }
    });
});

我怎样才能实现这一功能？

5 个答案: