JavaScript \ JQuery - определение изменения значения переключателя при нажатии

У меня есть страница со списком записей. Пользователь может выбрать статус записи с помощью переключателей, например:

<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? В случае?), Чтобы я мог с ним сравнить?

Если нет, как мне сохранить старое значение?


javascript jquery ajax onchange radio-button
person daphshez    schedule 28.09.2009    source источник

Ответы (4)


arrow_upward
8
arrow_downward

Старое значение не хранится где-нибудь, где вы можете запросить его, нет. Вам нужно будет сохранить ценность самостоятельно. Вы можете использовать переменную javascript, скрытый элемент input или функцию data() jQuery.

ИЗМЕНИТЬ

Функция 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);
        }

    });

});
person Ken Browning    schedule 28.09.2009
comment
Спасибо за ответ. Интересно, какое из ваших решений лучше - какое из них использовал бы опытный разработчик для решения этой проблемы. - person daphshez; 29.09.2009
comment
Дополнительный поисковый запрос: Получить значение по умолчанию. - person Reid; 12.03.2015

arrow_upward
2
arrow_downward 

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

});

Это было сложно сделать в моей голове, но я думаю, вам нужно что-то вроде этого.

person meder omuraliev    schedule 28.09.2009
comment
Код неверен после первого щелчка (на этот раз вам, очевидно, нужно изменить isChecked в предложении if, а не в предложении else), но он дал мне хорошие подсказки о том, как использовать функцию данных и проверенный фильтр. Спасибо. - person daphshez; 01.10.2009

arrow_upward
0
arrow_downward

Как было предложено meder и Кен Браунинг, я закончил используя JQuery data () для хранения предыдущего значения и проверки его при каждом щелчке.

Одно из решений - сохранить логическое значение «проверено» для каждого входного радио. Однако вам необходимо поддерживать это значение. Таким образом, в обработчике события щелчка, помимо изменения «проверяется» для текущего ввода, вам необходимо найти ввод, который ранее был проверен, и изменить его данные «проверено» на 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);
                 }
            });

        });
    }
);

Спасибо

person daphshez    schedule 01.10.2009

arrow_upward
0
arrow_downward

У меня была та же проблема, но с FF мне удалось справиться с ней, используя событие onchange, а не onclick.

Это именно то, что я искал для работы с IE7. Работает как шарм! Спасибо за подробное решение!

person Community    schedule 12.11.2009