جافا سكريبت jquery - تحديد ما إذا كانت قيمة زر الراديو تغيرت عن طريق النقر

Question

لدي صفحة تعرض قائمة بالسجلات. يمكن للمستخدم تحديد حالة السجل باستخدام أزرار الراديو، على سبيل المثال:

<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 غير مفيد للغاية (على سبيل المثال هنا).

لذلك أنا الرقم أنا بطريقة أو بأخرى لتحديد ما إذا كان حدث النقر غير القيمة.

هل القيمة القديمة المخزنة في مكان ما (في دوم؟ في الحدث؟) حتى أتمكن من المقارنة معها؟

إذا لم يكن الأمر كذلك، كيف يمكنني تخزين القيمة القديمة؟

Answer 1

لا يتم تخزين القيمة القديمة في مكان ما يمكنك الاستعلام عنه، لا. ستحتاج إلى تخزين قيمة نفسك. يمكنك استخدام متغير جافا سكريبت، مخفي input العنصر، أو jQuery's data() وظيفة.

تعديل

jQuery. data توفر الوظيفة إمكانية الوصول إلى بنية بيانات ذات قيمة رئيسية كوسيلة لتخزين البيانات التعسفية لعنصر معين. يبدو أن 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);
        }

    });

});

Answer 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') );
        }
    })

});

كان هذا معقدا للقيام به في رأسي، لكنني أعتقد أنك تريد شيئا مثل هذا.

Answer 3

كما اقترح من قبل مادس و كين براوننج, انتهى بي الأمر باستخدام بيانات JQuery () لتخزين القيمة السابقة والتحقق منها على كل نقرة.

تخزين "تم فحصه" منطقية لكل راديو الإدخال هو حل واحد. ومع ذلك تحتاج إلى الحفاظ على هذه القيمة. لذلك في معالج الأحداث Click، بالإضافة إلى تغيير "تم التحقق" من الإدخال الحالي، تحتاج إلى العثور على إدخال الإدخال الذي تم فحصه مسبقا وتغيير البيانات "تم فحصها" إلى 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);
                 }
            });

        });
    }
);

شكرا

Answer 4

كان لدي نفس المشكلة، ولكن مع FF تمكنت من التعامل معها باستخدام حدث onchange بدلا من onclick.

هذا هو بالضبط ما كنت أبحث عنه للتعامل مع IE7. يعمل كالسحر! شكرا للحل المفصل!