0

スクリプトを呼び出して 3 つの値すべてを追加し、それらを非表示フィールドに配置する onChange 関数を含む 3 つの選択ボックスがあります。問題は、他の値に応じてボックスを変更する別のスクリプトがあることです。スクリプト 2 は、スクリプト 1 が選択オプションの値の変更を完了する前に値を保存します。

スクリプト 1 年と月の値に基づいて日の値を更新します。

<script type='text/javascript'>
    $().ready(function () { 
        $().dateSelectBoxes($('#release_month'),$('#release_day'),$('#release_year'),true);
    });
</script>

スクリプト 2 3 つの日付すべてを取得し、1 つの完全な日付を作成します。問題は、スクリプト 1 がその日に更新される前にこれを行うことです。

<script>
     function datepopulate(){
    var day = document.getElementById('release_day').value.substr(-2);
    var month = document.getElementById('release_month').value;
    var year = document.getElementById('release_year').value;
   var completedate = year+'-'+month+'-'+day;
   document.getElementById('releasedate_value').value = completedate;
      alert(document.getElementById('releasedate_value').value);
   return true;
}

</script>

スクリプト 2 は次のように呼び出されます。スクリプト1は自動ですが

<select onChange="datepopulate();"> </select>
4

5 に答える 5

1

クリックイベントコードが発生した後、追加のロジックを実行するには、jQueryプラグインからのコールバックを公開する必要があるようです。したがって、次のようなものになります。

<script type='text/javascript'>
    $().ready(function () { 
        $().dateSelectBoxes($('#release_month'),$('#release_day'),$('#release_year'),true, function()
            {
                // Do Stuff after this plugin does its stuff
            });
    });
</script>

2つのイベントをchangeイベントに接続したようですが、最初に発生するイベントが確定しないため、同期の問題が発生しています。コールバックメカニズムを介してイベントを並べ替えることでこれを強制できる場合は、問題を解決する必要があります。

編集：コードをjQueryに変換するのは、実際には非常に簡単です。これはjQueryバージョンになります：

var date = $('#release_year').val() + "-" + $('#release_month').val() + "-" + $('#release_day').val();

$('#releasedate_value').val(date);

このval()関数は、照会された要素の値を返します。Idで選択しているので、これはvalue要素のを効果的に取り戻すことを意味します。次に、文字列を連結し、同じメソッドを使用して非表示の値に割り当てますが、値をパラメーターとして使用します。

于 2012-04-23T19:14:41.600 に答える
1

選択ボックスへのコールバックとして datepopulate() 関数を使用して jquery .change() イベントをアタッチし、ロジックを .ready(...) セクションにチェーンすることができます。

于 2012-04-23T19:12:18.983 に答える
0

dateSelectBoxesに関数の引数を追加して、onchangeの代わりにdatepopulate自体を呼び出すようにします。

 $().ready(function () { 
    $().dateSelectBoxes($('#release_month'),$('#release_day'),$('#release_year'),true, datepopulate);
});
于 2012-04-23T19:12:58.607 に答える
0

イベントの終了を JavaScript で待機するためにタイムアウトを使用しないでください。何かが確実に行われるようにする唯一の方法は、コールバックを使用することです。それについて疑いの余地はありません。そうしないと、さらに問題が発生するだけです。

ただし、これを試してください：

<script type='text/javascript'>
$(document).ready(function () { 
    $.dateSelectBoxes($('#release_month'),$('#release_day'),$('#release_year'),true);
    $("select").on("change", function(){
            var day = document.getElementById('release_day').value.substr(-2),
        month = document.getElementById('release_month').value,
        year = document.getElementById('release_year').value,
        completedate = year+'-'+month+'-'+day;
        if(day > 0 && month > 0 && year > 0){
            document.getElementById('releasedate_value').value = completedate;
            alert(document.getElementById('releasedate_value').value);
        }
    });
});
</script>

ただし、それを行う「正しい」方法は、ボタン<input type=button style="display:none">を作成し、変更時にすべての選択ボックスの値が != 0 であることを確認することです。次に、すべてが選択されている場合は$("button").css("display", "block");、

$("button").on('click', function(){
    var day = document.getElementById('release_day').value.substr(-2),
    month = document.getElementById('release_month').value,
    year = document.getElementById('release_year').value;
    document.getElementById('releasedate_value').value = year+'-'+month+'-'+day;
    alert(document.getElementById('releasedate_value').value);
});
于 2012-04-23T19:46:15.917 に答える
0

これが適切に機能しない場合があることを指摘することが重要だと思います (jQuery 1.7 の時点):

$('#element').html(some_really_large_value);
console.log($('#element').html());

DOM の更新によって関数の実行がブロックされない場合があり、コンソールに表示されるのは #element の以前の内容になります。

上記の例の場合、$.dateSelectBoxes にコールバックを追加しても問題が解決しない場合があります。それでも正しい値が返されない場合:

$.dateSelectBoxes( ... $('#release_month') ... , function(){
   console.log($('#release_month').val());
});

次に、私が知っている唯一の解決策は、競合状態を追加することです。

$.dateSelectBoxes( ... $('#release_month') ... , function(){
   setTimeout(function(){ console.log($('#release_month').val()) }, 100);
});

[アップデート]

ここでの問題は、 .html() メソッドが関数の実行をブロックしていないことではなく、ブラウザーが関数スコープごとに DOM の更新をグループ化していることです (またはそのようなもので、詳細が少し曖昧です)。 ）。

これは、.html() および .val() を使用した jQuery DOM 更新がブロックすることを意味しますが、ブラウザで DOM 更新をスケジュールする限りブロックします。したがって、読み込まれた DOM を setTimeout( fn, 1) でラップしても問題は解決します。

ところで、これはまさにFrame.jsが解決するために設計されたものです。

于 2012-04-23T20:16:43.637 に答える