jQuery输入触发实时更改

Question

当我单击单选按钮时，我成功地执行了更改，但问题是，当我重新加载页面时，单选按钮的选择被保留，但更改没有。换句话说，如果我单击单选按钮#1，它将降低某些字段的不透明度。当我回到这个页面时，所有的字段都是完全不透明的，直到我再次点击单选按钮，它才会执行这个机会。

这是我的代码：

(function($) {
    // Document Ready
    $(document).ready(function() {
        // trigger change on the radio list to show selected field
        $('#acf-feature_slide ul.radio_list li label input').trigger('change');
    });
    // Content Type change
    $('#acf-feature_slide ul.radio_list li label input').live('change', function() {
        // vars
        var value = $(this).val();
        // show the selected field
        if( value == "internal" ) {
            $(this).parentsUntil('tr').find('div.row-layout-field').eq(3).css('opacity', '1.0');
            $(this).parentsUntil('tr').find('div.row-layout-field').eq(4).css('opacity', '0.2');
        }
        else if( value == "external" ) {
            $(this).parentsUntil('tr').find('div.row-layout-field').eq(3).css('opacity', '0.2');
            $(this).parentsUntil('tr').find('div.row-layout-field').eq(4).css('opacity', '1.0');
        }
        else if( value == "none" ) {
            $(this).parentsUntil('tr').find('div.row-layout-field').eq(3).css('opacity', '0.2');
            $(this).parentsUntil('tr').find('div.row-layout-field').eq(4).css('opacity', '0.2');
        }
        else {
            $(this).parentsUntil('tr').find('div.row-layout-field').eq(3).css('opacity', '1.0');
            $(this).parentsUntil('tr').find('div.row-layout-field').eq(4).css('opacity', '1.0');
        }
    });
})(jQuery);

非常感谢您的帮助。

谢谢，

Answer 1

有些浏览器会在重新加载时保留您为某些按钮选择的选项（不能保证始终工作或在每个浏览器上工作），但肯定不会保留触发事件等内容。换言之，你需要以两种方式中的一种（或两种）存储你的单选按钮选择和不透明度选择，以便它们在重载1）HTML5本地存储（不建议使用cookie）2）服务器端保持不变。

您当前的代码不存储任何内容-您只是幸运地发现，您的浏览器在重新加载时恰好保留了您的单选按钮选择。

编辑：所以你没有幸运地使用单选按钮。。。非常好！如果您可以确保单选按钮在重新加载时保持选中状态，那么是的，您可以验证它是否已选中。

假设你确切地知道你想要验证的单选按钮的id，并且你想知道它是否被选中。在文档加载时执行此操作：$（'#myradiobutton'）.is（':checked'）；如果未选中，将返回false，如果选中，则返回true。然后你可以用if语句说

if( $('#myradiobutton').is(':checked') ){
   dothis();
}