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

我没有测试过，但是也许您想要一个更动态的功能。 Button类的名称必须类似于“ formButton”，而ID则应类似于“ form1Button”，然后表单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();

});

单击formButton时，将显示该表单。 没有要求的ID的所有其他表格将被隐藏。