JavaScript\JQuery – Identifiziert, ob sich der Wert des Optionsfelds durch Klicken geändert hat

Question

Ich habe eine Seite, die eine Liste von Datensätzen anzeigt.Der Benutzer kann den Aufzeichnungsstatus mithilfe von Optionsfeldern auswählen, z. B.:

<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>

Ich verwende JQuery, um die vom Benutzer vorgenommenen Änderungen zurück an den Server zu senden, wo ich sie zum Aktualisieren der Datenbank verwende.Dies ist eine vereinfachte Version von dem, was ich mache:

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

Das Problem besteht darin, dass dieser Code auch dann Anfragen erstellt, wenn der Benutzer auf dieselbe Schaltfläche klickt, die zuvor aktiviert wurde.Was ich eigentlich möchte, ist das Ereignis „bei Änderung“, außer dass sein Verhalten im Internet Explorer nicht sehr nützlich ist (z. B. Hier).

Ich denke also, dass ich irgendwie herausfinden muss, ob das Klickereignis den Wert geändert hat.

Ist der alte Wert irgendwo gespeichert (im DOM?in dem Fall?), damit ich damit vergleichen kann?

Wenn nicht, wie soll ich den alten Wert speichern?

Answer 1

Der alte Wert wird irgendwo nicht gespeichert, wo Sie es abfragen können, nein. Sie müssen den Wert selbst speichern. Sie könnten einen Javascript-Variable, ein verstecktes input Element verwenden oder jQuery data() Funktion.

Bearbeiten

Die jQuery data Funktion ermöglicht den Zugang zu einer Schlüssel-Wert-Paar-Datenstruktur als ein Weg für ein gegebenes Element, beliebige Daten zu speichern. Die api wie folgt aussehen:

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

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

Ein entwickelteren Gedanke:

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

});

Das war kompliziert in meinem Kopf zu tun, aber ich glaube, Sie so etwas wie dies will.

Answer 3

Wie von vorgeschlagen meder Und Ken Browning, habe ich schließlich data() von JQuery verwendet, um den vorherigen Wert zu speichern und ihn bei jedem Klick zu vergleichen.

Eine Lösung ist das Speichern eines booleschen Werts „wird überprüft“ für jedes Eingangsradio.Sie müssen diesen Wert jedoch beibehalten.Im Click-Event-Handler müssen Sie also nicht nur das „wird überprüft“ der aktuellen Eingabe ändern, sondern auch die Eingabe finden, die zuvor überprüft wurde, und deren „wird überprüft“-Daten in „Falsch“ ändern.

Stattdessen habe ich mich dafür entschieden, das aktuell überprüfte Objekt im übergeordneten Element zu speichern.Mein Code sieht also ungefähr so ​​aus:

$(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);
                 }
            });

        });
    }
);

Danke

Answer 4

Ich hatte das gleiche Problem, aber mit FF konnte ich mit ihm über das onchange Ereignis behandeln, anstatt die Onclick.

Das ist genau das, was ich suchte mit IE7 zu beschäftigen. Klappt wunderbar! Danke für die ausführliche Lösung!