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，将被隐藏。

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

3 个答案: