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

Question

感觉有点傻，我似乎不能百分之百地工作.

当选择单选按钮时，下面的代码工作得很好，但是我也需要它在页面加载上运行--似乎找不出如何让它发挥作用。这里的(很多)帖子似乎没有提供解决方案--我很有信心我错过了一些非常简单的东西！(你可能已经猜到了，JS不是我的强项！)

$('#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 + ' .' + inputValue + '-fields';
  
    $(targetBox).removeClass('hide-field');
  
    // console.log(parent + ' ' + inputValue + ' ' + targetBox);

});

Html标记如下。(需要注意的是:可以有几个.box容器，而且我对html没有太多的直接控制，因为它是由插件输出的)

<div id="cvl_mb_services">
  <div id="box_01" class="box">
    <div class="content-switch">
      <ul>
        <li><input type="radio" class="content-option" value="header" checked="checked"><label>Header</label></li>
        <li><input type="radio" class="content-option" value="content"><label>Content</label></li>
        <li><input type="radio" class="content-option" value="footer"><label>Footer</label></li>
      </ul>
    </div>
    <div class="fields header-fields hide-field">
      <p>You should only see this content of the Header Option is selected (or pre-selected) in this box</p>
    </div>
    <div class="fields content-fields hide-field">
      <p>You should only see this content of the Content Option is selected (or pre-selected) in this box</p>
    </div>
    <div class="fields footer-fields hide-field">
      <p>You should only see this content of the Footer Option is selected (or pre-selected) in this box</p>
    </div>
  </div><!-- #box_01 -->
  <div id="box_02" class="box">
    <div class="content-switch">
      <ul>
        <li><input type="radio" class="content-option" value="header"><label>Header</label></li>
        <li><input type="radio" class="content-option" value="content" checked="checked"><label>Content</label></li>
        <li><input type="radio" class="content-option" value="footer"><label>Footer</label></li>
      </ul>
    </div>
    <div class="fields header-fields hide-field">
      <p>You should only see this content of the Header Option is selected (or pre-selected) in this box</p>
    </div>
    <div class="fields content-fields hide-field">
      <p>You should only see this content of the Content Option is selected (or pre-selected) in this box</p>
    </div>
    <div class="fields footer-fields hide-field">
      <p>You should only see this content of the Footer Option is selected (or pre-selected) in this box</p>
    </div>
  </div><!-- #box_02 -->
</div>

提前感谢

Answer 1

现在用以下方法工作..。

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

});

我现在想让这个变得更干/更有效率，并在此张贴.

Suggestions to make this jQuery function more DRY / more efficient

Answer 2

我会将回调代码放入函数中，并在触发文档就绪事件时调用它，然后将其称为单选按钮的回调函数，单击事件侦听器。

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