1

ユーザーがステートメントに同意する必要があるアプリケーションの領域があり、ユーザーが「はい」を選択すると、日付/時刻が読み取り専用フィールドに自動的に入力されるように、Javascript/jQuery を使用しています。

再現できませんが、「はい」を選択すると日付/時刻が入力されず、フィールドが読み取り専用であるため、自分で入力できないと複数のユーザーから言われています。

私のコードには、特定のブラウザーで上記の問題を引き起こす型にはまらないものはありますか? 誰でも自分のマシンでこれを再現できますか?

これが実際の例です: http://jsfiddle.net/YL2Wd/

HTML:

<div>
    <label>I agree:*</label>
    <span class="options">
        <label for="agreement_no">No</label>
        <input type="radio" class="required authorization" value="0" id="agreement_no" name="agreement">

        <label for="agreement_yes">Yes</label>
        <input type="radio" class="required authorization" value="1" id="agreement_yes" name="agreement">
    </span>
</div>
<div class="description">
    Agreement Text
</div>
<div class="question">
    <label for="authorization_timestamp">Date/Time*</label>
    <input type="text" readonly="readonly" maxlength="100" class="authorization_timestamp required" name="authorization_timestamp" id="authorization_timestamp">
</div>

Javascript:

$('.authorization[id$="yes"]').on('change', function() {

    var dateStr;

    if ($(this).val() == 1) {

        var now = new Date();

        var month = now.getMonth() + 1;
        var day = now.getDate();
        var year = now.getFullYear();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();

        month = month < 10 ? "0" + month : month;
        day = day < 10 ? "0" + day : day;
        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;

        dateStr = month + "/" + day + "/" + year + " " + h + ":" + m + ":" + s
    }

    $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);

});

$('.authorization[id$="no"]').on('change', function() {

    var dateStr;
    dateStr = "";
    $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);

});
4

3 に答える 3

2

それ以外の

 $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);

ただ使う

 $("#authorization_timestamp").val(dateStr);

つまり、その要素に行くidかclass、その要素を指す必要があります。

デモ

.next().next()... 連鎖を避けるようにしてください。もろく、html が壊れる原因となるためです。常に要素を使用idまたはclassポイントするようにしてください。一部のブラウザはそれで問題を引き起こし、その周りに空のテキスト ノードを作成します。

コードを変更することにまったく興味がない場合 (良くないので変更する必要があります)、

    $(this)
        .parent()   // go to span
        .parent()  // jump to parent div
        .next()   // .description div
        .next('.question') // .question div
        .find('.authorization_timestamp')  // find the input
        .val(dateStr); // set value

クエリを少し編集します。

  $(this)
        .parent()
        .parent()
        .nextAll('.question')
        .find(".authorization_timestamp")
        .val(dateStr);

あなたのコメントによると：

このようにしてみてください：

var index = this.id                          // get id of radio
                  .replace('agreement','')   // replace agreement string
                  .replace('_yes','');       // replace yes string
                                             // output: 1, 2, 3 ...

$("input#authorization" + index + '_timestamp')   // get the target input field 
                                                  // using that index, because your
                                                  // html is synchronous with index
                                    .val(dateStr);

デモ

私は のためにそれをしますyes、同様に のためにそれをしnoます。

于 2012-06-06T01:50:48.393 に答える
1

これを行う簡単な方法を示すために、 JSFiddleを変更しました。基本的に、ラジオボタン入力を動的に作成する場合data-timestampは、関連するタイムスタンプテキストボックスの動的に生成されたIDを指す属性を追加します。

<input type="radio" class="required authorization" value="0" id="agreement1_no" data-timestamp="authorization1_timestamp" name="agreement1">
<input type="radio" class="required authorization" value="1" id="agreement1_yes" data-timestamp="authorization1_timestamp" name="agreement1">

次に、jQuery関数で、その属性の値を取得し、それをjQueryセレクターとして使用して、テキストボックスの値を設定します。

var targetElement = "#" + $(this).attr("data-timestamp");
$(targetElement).val(dateStr);
于 2012-06-06T02:39:38.330 に答える
0

コードパラドックスは、何をすべきかをすでに示しています$("#authorization_timestamp").val(dateStr);。一部のブラウザーで機能しない理由は、HTML 要素の周りに空のテキスト ノードが作成される方法が原因である可能性があります。

スペースを含まないように HTML を変更すると、セレクターが機能するはずです。そうは言っても、次のようなコードを使用して

$(this).parent().parent().nextAll()

HTML に小さな変更を加えると、コードが壊れる確実な方法です。

ID を使わずに動作 させる が複数存在する可能性がある場合authorization_timestamp、ID を割り当てることはできません。それをクラスにして、次のようなものを使用します

<!-- Add a div with a class around all your HTML so you can properly 
     walk up and back down to the search field to your form wrapper -->
<div class="form-wrapper">old content</div>...

次のような要素を見つけます

$(this).parents(".form-wrapper").find("authorization_timestamp");

ここで実際の例を作成しました: http://jsfiddle.net/YL2Wd/11/また、コードを改善して、2 つの個別のハンドラーを必要としないようにしました。

于 2012-06-06T02:04:21.707 に答える