Javascript 在页面加载和无线电输入上运行jQuery函数

感觉有点傻，我似乎无法100%地工作

当选择单选按钮时，下面的代码可以很好地工作，但我需要它在页面加载时运行-似乎无法理解如何让它发挥作用。这里的（许多）帖子似乎并没有提供解决方案——我相当自信我错过了一些非常简单的东西！！（你可能已经猜到JS不是我的强项！！）

Html标记如下所示。（需要注意的是：可能有几个

.box

容器，我对html没有太多直接的控制，因为它是由插件输出的）

标题
内容
页脚

您应该只看到此框中选中（或预选）标题选项的此内容

您应该只看到此框中选中（或预选）内容选项的此内容

您应该只看到此框中选中（或预选）页脚选项的此内容


标题
内容
页脚

您应该只看到此框中选中（或预选）标题选项的此内容

您应该只看到此框中选中（或预选）内容选项的此内容

您应该只看到此框中选中（或预选）页脚选项的此内容

---

提前感谢我会将回调代码放入函数中，并在触发document ready事件时调用它，然后将其称为单选按钮click事件侦听器的回调函数

function handleServicesRadioButton(elem) {
    var parent      = elem.parent().parent().parent().parent().parent().parent().attr("id");
    var inputValue  = elem.closest('input[type="radio"]').attr("value");
    var targetBox   = '#' + parent + ' .' + inputValue + '-fields';
    $(targetBox).removeClass('hide-field');
}

$(document).ready(function() {
    var radioButtonElem = $(".box .content-option").eq(0); //here I am selecting the first radio button for example
    handleServicesRadioButton(radioButtonElem); //called on page load
    servicesElem.on('click', 'input[type="radio"]', function(){
        var elem = $(this);
        handleServicesRadioButton(elem); //called on radio button click
    });
});

---

现在正在处理以下内容

$( "#cvl_mb_services .content-switch" ).each(function(index, el) {
    var parent        = $(el).parent().parent().attr("id");
    var inputValue    = $('#' + parent + ' input[type=radio]:checked').val();
    var targetBox   = '#' + parent + ' .cvl-' + inputValue + '-fields';

    $(targetBox).removeClass('cvl-hide');
});


$('#cvl_mb_services .content-switch').on('click', 'input[type="radio"]', function(){

    var parent      = $(this).parent().parent().parent().parent().parent().parent().attr("id");
    var inputValue  = $(this).closest('input[type="radio"]').attr("value");
    var targetBox   = '#' + parent + ' .cvl-' + inputValue + '-fields';

    if (inputValue == 'content') {
        $('#' + parent + ' .cvl-content-fields').removeClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').addClass('cvl-hide');
    } else if (inputValue == 'header') {
        $('#' + parent + ' .cvl-content-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').removeClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').addClass('cvl-hide');
    } else if (inputValue == 'footer') {
        $('#' + parent + ' .cvl-content-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').removeClass('cvl-hide');
    }

});

我现在正在寻找使这个干燥/更有效，并已在这里发布

---

谢谢@Shikartoos-我收到了一个服务，恐怕这个代码段上的错误没有定义。是的，你可以用$（“#cvl_mb_services.content switch”更改它）

function handleServicesRadioButton(elem) {
    var parent      = elem.parent().parent().parent().parent().parent().parent().attr("id");
    var inputValue  = elem.closest('input[type="radio"]').attr("value");
    var targetBox   = '#' + parent + ' .' + inputValue + '-fields';
    $(targetBox).removeClass('hide-field');
}

$(document).ready(function() {
    var radioButtonElem = $(".box .content-option").eq(0); //here I am selecting the first radio button for example
    handleServicesRadioButton(radioButtonElem); //called on page load
    servicesElem.on('click', 'input[type="radio"]', function(){
        var elem = $(this);
        handleServicesRadioButton(elem); //called on radio button click
    });
});

$( "#cvl_mb_services .content-switch" ).each(function(index, el) {
    var parent        = $(el).parent().parent().attr("id");
    var inputValue    = $('#' + parent + ' input[type=radio]:checked').val();
    var targetBox   = '#' + parent + ' .cvl-' + inputValue + '-fields';

    $(targetBox).removeClass('cvl-hide');
});


$('#cvl_mb_services .content-switch').on('click', 'input[type="radio"]', function(){

    var parent      = $(this).parent().parent().parent().parent().parent().parent().attr("id");
    var inputValue  = $(this).closest('input[type="radio"]').attr("value");
    var targetBox   = '#' + parent + ' .cvl-' + inputValue + '-fields';

    if (inputValue == 'content') {
        $('#' + parent + ' .cvl-content-fields').removeClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').addClass('cvl-hide');
    } else if (inputValue == 'header') {
        $('#' + parent + ' .cvl-content-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').removeClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').addClass('cvl-hide');
    } else if (inputValue == 'footer') {
        $('#' + parent + ' .cvl-content-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-header-fields').addClass('cvl-hide');
        $('#' + parent + ' .cvl-footer-fields').removeClass('cvl-hide');
    }

});