1

レコードのリストを表示するページがあります。ユーザーは、ラジオ ボタンを使用して記録ステータスを選択できます。

<div id="record_653">
  <label><input type="radio" name="status_653" value="new" checked/>new</label>
  <label><input type="radio" name="status_653" value="skipped" />skipped</label>
  <label><input type="radio" name="status_653" value="downloaded" />downloaded</label>
</div>

私はJQueryを使用して、ユーザーが行った変更をサーバーに送り返し、そこでそれらを使用してデータベースを更新しています。これは私がしていることの単純化されたバージョンです:

$("#record_653").click( 
function(event) { 
    var url = ...,        
        params = ...;
    post(url,params);                    
});

問題は、ユーザーが以前にチェックしたのと同じボタンをクリックしても、このコードがリクエストを作成することです。私が実際に必要としているのは、「変更時」イベントですが、Internet Explorer でのその動作はあまり役に立ちません (例:ここ)。

したがって、クリックイベントが値を変更したかどうかを何らかの形で特定する必要があると思います。

古い値はどこかに保存されていますか (DOM の? イベントの?) ので、それと比較できますか?

そうでない場合、古い値をどのように保存すればよいですか?

4

4 に答える 4

8

古い値は、クエリできる場所に保存されていません。値を自分で保存する必要があります。JavaScript 変数、隠しinput要素、または jQuery のdata()関数を使用できます。

編集

jQuerydata関数は、特定の要素の任意のデータを格納する方法として、キーと値のペアのデータ構造へのアクセスを提供します。API は次のようになります。

 // store original value for an element
 $(selector).data('key', value);

 // retrieve original value for an element
 var value = $(selector).data('key');

より発展した考え：

$(document).ready(function() {

    // store original values on document ready
    $(selector).each(function() {
        var value = $(this).val();
        $(this).data('original-value', value);
    })

    // later on, you might attach a click handler to the the option
    // and want to determine if the value has actually changed or not.
    $(selector).click(function() {

        var currentValue = $(this).val();
        var originalValue = $(this).data('original-value');
        if (currentValue != originalValue) {

            // do stuff.

            // you might want to update the original value so future changes
            // can be detected:
            $(this).data('original-value', currentValue);
        }

    });

});
于 2009-09-28T19:13:13.283 に答える
2 
$('#record_653 input:radio').each(function() {
    $(this).data('isChecked', $(this).is(':checked'));

    $(this).click(function() {
        if ( $(this).is(':checked') !== $(this).data('isChecked') ) {
            // do changed action
        } else {
          $(this).data('isChecked', !$(this).data('isChecked') );
        }
    })

});

これは私の頭の中で行うのは複雑でしたが、あなたはこのようなものが欲しいと思います.

于 2009-09-28T19:19:47.347 に答える
0

同じ問題が発生しましたが、FFでは、onclickではなくonchangeイベントを使用して対処することができました。

これはまさに私がIE7に対処するために探していたものです。チャームのように機能します！詳細な解決策をありがとう！

于 2009-11-12T15:20:26.020 に答える
0

mederとKen Browningによって提案されたように、JQuery の data() を使用して以前の値を保存し、クリックするたびにそれをチェックすることになりました。

入力無線ごとに「チェック済み」のブール値を格納することは、1 つの解決策です。ただし、この値を維持する必要があります。そのため、クリック イベント ハンドラーでは、現在の入力の「チェック済み」を変更するだけでなく、以前にチェックされた入力を見つけて、その「チェック済み」データを false に変更する必要があります。

私が代わりに選択したのは、現在チェックされているオブジェクトを親要素に格納することでした。したがって、私のコードは次のようになります。

$(document).ready(  
    function()  {
        // find the checked input and store it as "currChecked" for the record
        $("#record_653").data("currChecked", 
                             $(this).find("input:radio:checked")[0]);
        // add the click event
        $("#record_653").click( function(event) {
                 if ($(event.target).is("input:radio") && 
                     event.target !== $(this).data("currChecked")) 
                 {
                    $(this).data("currChecked", event.target);
                    handleChangeEvent(event);
                 }
            });

        });
    }
);

ありがとう

于 2009-10-01T10:56:40.903 に答える