JQuery按钮每次点击，显示/隐藏表单

Question

我想我才刚刚开始，所以最好寻求任何帮助，因为我对这个新手问题很沮丧。。。

我有一个按钮，只需单击一次就可以显示我创建的表单，但当我想显示另一个带有另一个按钮的表单时，问题就来了。

我想要的基本上是buttonA显示formA，但当我单击buttonB时，我想隐藏formA并显示formB。现在发生的是它覆盖了formA和formB。

这是我当前的代码。。

function runEffect() {
  $( "#effect" ).show( "drop");
};
function runEffect2() {
  $( "#effect2" ).show( "drop");
};

//callback function to bring a hidden box back
function hideEffect() {
    $( "#effect:visible" ).hide( "drop");
};
// set effect from select menu value
$( "#button" ).each(function(index) {
  $(this).click(function(){
  runEffect();
    });
});
$( "#button2" ).each(function(index) {
  $(this).click(function(){
  runEffect2();
    });
});
$( "#effect" ).hide();
$( "#effect2" ).hide();

我知道这很容易，但我似乎找不到答案

谢谢！

Answer 1

尝试这个

function runEffect() {
  $( "#effect" ).show( "drop");
  $( "#effect2" ).hide( "drop");
};
function runEffect2() {
 $( "#effect2" ).show( "drop");
 $( "#effect" ).hide( "drop");
};

Answer 2

$('#buttonB').click(funciton()(
$('#formA').hide();
$('#formB').show();
});

像这样的东西？

Answer 3

我还没有测试过它，但也许你想要一个更动态的函数。按钮类必须是类似于"formButton"和类似于"form1Button"的id，然后表单id应该是"form1"，依此类推。

（表单2将有一个类为"formButton"的按钮，id类似于"form2Button"，表单2需要id为"form2"的

$(".formButton").click(function(e) {
    e.preventDefault(); //prevent default action
    var id = $(this).attr('id');
    var formId = id.replace('Button', '');
    $('#' + formId).show(); 
    $('form').not(document.getElementById(formId)).hide();
});

单击表单按钮时，将显示该表单。所有其他没有所需ID的表单都将被隐藏。