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
于 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 に答える