jquery在单选按钮和页面加载时更改css

Question

我有以下jquery片段，它根据选择的单选按钮显示或隐藏css项目...

<script>
    jQuery('input:radio[name="type"]').change(
        function(){
            if (jQuery(this).val() == 'value1') {
                jQuery('.one').css({'display':'none'});
                jQuery('.two').css({'display':'block'});
                jQuery('.three').css({'display':'none'});
            }
            else if (jQuery(this).val() == 'value2') {
                jQuery('.one').css({'display':'block'});
                jQuery('.two').css({'display':'none'});
                jQuery('.three').css({'display':'none'});
            }
            else if (jQuery(this).val() == 'value3') {
                jQuery('.one').css({'display':'none'});
                jQuery('.two').css({'display':'none'});
                jQuery('.three').css({'display':'none'});           
            }               
    });
</script>

它工作得很好，但我现在要做的就是在页面加载时发生这种情况，而不是仅仅在单选按钮被更改时。

最简单的方法是什么？

Answer 1

您可以在附加事件侦听器之后链接.change()方法。

这样做会在附加事件侦听器之后触发change事件（可能在页面加载时发生）。

Example Here

$('input:radio[name="type"]').change(function () {
    // ...
}).change(); // <---

---

您也可以使用.trigger('change')代替.change()：

Example Here

$('input:radio[name="type"]').change(function () {
    // ...
}).trigger('change'); // <---

---

根据脚本在HTML文档中的位置，您可能需要确保它也包含在DOM就绪处理程序中！

$(document).ready(function () {
    $('input:radio[name="type"]').change(function () {
        // ...
    }).change();
});