-3

私は非常に近いと思いますが、完全ではありません...要するに、テーブルの上部の入力フィールドにデータが存在するかどうかに応じて、テーブルの下部を表示しようとしています (ステップ 2) (ステップ1）。ドキュメントの初期ロードと変更時に、jQuery を介して removeClass を使用しようとしています。

注意してください：ここに含まれているのは複数のスクリプトです - 私の経験不足を示すものではありませんが、これを解決するために一生懸命働いてきたことを示すために、これらは私の複数の試みです...

http://jsfiddle.net/SUrU9/2/

<table>
<tr align="center">
    <td colspan="2">
        <hr>
    </td>
</tr>
<tr id="Step1ID">
    <td valign="middle">Step 1 Data:</td>
    <td valign="middle">
        <input type="text" id="Step1Data" name="Step1Data" size="8" maxlength="8" />
    </td>
</tr>
<tr align="center">
    <td colspan="2">
        <hr>
    </td>
</tr>
<tr id="Step2ID" class="hideS2">
    <td>Step2 Data:</td>
    <td>
        <input type="text" id="Step2Data" name="Step2Data" size="8" maxlength="8" />
    </td>
</tr>
<tr align="center">
    <td colspan="2">
        <hr>
    </td>
</tr>
</table>


$(document).ready(function () {
var Step1Data = $("#Step1Data").val();
if (Step1Data === '') {} else {
    $('tr').removeClass('hideS2');
}

$(document).on('change', '#Step1ID', function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});

$(body).on('change', '#Step1ID', function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});

$('#Step1ID').on('change', '#Step1Data', function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});

$("Step1Data").blur(function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});

$("Step1ID").focusout(function () {
    var Step1Data = $.trim(("#Step1Data").val());
    if (Step1Data === '') {} else {
        $('tr').removeClass('hideS2');
    }
});
});


 .hideS2 {
 display: none;
 }
4

3 に答える 3

2

Step1Info 変数と Step2Info 変数にデータが含まれているかどうか、およびテーブルの次の部分が明らかになるかどうかを確認する必要がありますか? 機能しない理由は、ドキュメントの準備ができたときに if ステートメントが実行されるためです。データをチェックしたいフォームの部分にユーザーが実際に入力すると、jQuery は再度チェックするように指示されることはありません。私がすることは、ユーザーがフォーカスを前のステップに変更したときに非表示のクラスを削除するか、クラスを削除するイベントをトリガーする何かを実行させることです。ここにいくつかのコードがあります：

<table>
<tbody>
    <tr><td>Top Instruction</td></tr>
    <tr><td>Step1Info</td></tr>
    <tr id="Step2_id" class="hide"><td>Step2Info</td></tr>
    <tr id="Step3_id" class="hide"><td>Step3Info</td></tr>
    <tr><td>Bottom Instruction</td></tr>
</tbody> 
</table>

<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
    $(document).on('focus', '#textbox1', function() {
        $("#Step2_id").removeClass("hide");
    });

    $(document).on('focus', '#textbox2', function() {
        $("#Step3_id").removeClass("hide");
    });
});
</script>

<style>
.hide {
    display:none;
}
</style>

ユーザーが実際に何かをフォームに入力するまで待ちたい場合は、次のようにします。

$(document).on('change', '#textbox1', function() {
    $("#Step2_id").removeClass("hide");
});

私はいくつかの自由を取り、あなたが実際にどのようにセットアップしたかを推測しなければなりませんでした。これが少なくとも、物事が機能しない理由を理解するのに役立つことを願っています.

于 2013-07-11T18:53:09.783 に答える