1

请帮我处理我的代码片段。我有这段代码，但我不知道出了什么问题。这是我的代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<form id="krishna">
    <input type="text" readonly value="krishna" ><br>
    <button id="next">Next</button>
</form>
<form id="radha">
    <input type="text" readonly value="radha" ><br>
    <button id="prev">Previous</button>
</form>
<script>
$(document).ready(function(e) {
    $("#radha").hide();

    $("#next").click(function() {
        $("#radha").show();
        $("#krishna").hide();
    });

    $("#prev").click(function() {
        $("#radha").hide();
        $("#krishna").show();
    });
});
</script>

当我单击下一步时，似乎没有转到下一个表格.. 谢谢大家。

4

6 回答 6

4

这可能是由于您的表单缺少一些属性

HTML

<form id="krishna">
    <input type="text" readonly value="krishna" />
    <br />
    <button type='button' id="next">Next</button>
</form>
<form id="radha">
    <input type="text" readonly value="radha" />
        <br />
    <button type='button' id="prev">Previous</button>
</form>

脚本

$(document).ready(function () {
    $("#radha").hide();

    $("#next").click(function () {
        $("#radha").show();
        $("#krishna").hide();
    });

    $("#prev").click(function () {
        $("#radha").hide();
        $("#krishna").show();
    });
});

在这里检查

于 2013-10-01T04:48:29.230 回答
2

您需要阻止默认操作，即表单提交。当您阻止默认操作发生时，您将看到所需的结果

检查这个小提琴

$(document).ready(function () {
    $("#radha").hide();

    $("#next").click(function (e) {
        e.preventDefault();
        $("#radha").show();
        $("#krishna").hide();
    });

    $("#prev").click(function (e) {
        e.preventDefault();
        $("#radha").hide();
        $("#krishna").show();
    });
});

PS我不知道你为什么还在使用jquery 1.3.x。

此外，检查更新的 HTML 的小提琴

于 2013-10-01T04:48:33.723 回答
0

我就是这样做的。

http://jsfiddle.net/GnzWZ/2/

$('form button').click(function(e){
    $("#radha, #krishna").toggle();
    return false;
});

笔记：

  • return false 是preventdefault 的jquery 解决方案。
  • 您可以简化选择器并进一步优化代码。
  • 避免进行原本应该在 CSS 中进行的样式更改。
于 2013-10-01T04:50:28.093 回答
0

因为它正在尝试提交表单。因此，您需要将该按钮类型设置为按钮。在表单中默认为“提交”。

JSFidle 演示

<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button type="button" id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button type="button" id="prev">Previous</button>
</form>
于 2013-10-01T04:51:25.873 回答
0

您的代码很好，但是这里发生了什么，您的提交按钮需要发布请求。因此，您可以通过 jquery 的 e.preventDefault() 函数来防止这种行为。我已经更新了 jquery 代码，如下所示。

    $(document).ready(function(e) {
$("#radha").hide();

$("#next").click(function(e){
    e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});

$("#prev").click(function(e){
            e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});

});

访问以下链接以获取有关 jsfiddle 的演示：

http://jsfiddle.net/4N95Q/

于 2013-10-01T04:54:36.693 回答
-1 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="krishna">
    <input type="text" readonly value="krishna" ><br>
    <button id="next">Next</button>
</div>
<div id="radha">
    <input type="text" readonly value="radha" ><br>
    <button id="prev">Previous</button>
</div>
<script>
$(document).ready(function(e) {
    $("#radha").hide();

    $("#next").click(function() {
        $("#radha").show();
        $("#krishna").hide();
        console.log("next click");
    });

    $("#prev").click(function() {
        $("#radha").hide();
        $("#krishna").show();
    });
});
</script>

如果你改变工作正常

形式

在里面

div

于 2013-10-01T05:07:20.467 回答