เรียกใช้ฟังก์ชัน jQuery บน Page Load และ Radio Input Click

รู้สึกงี่เง่าเล็กน้อยดูเหมือนจะไม่สามารถทำงานนี้ได้ 100% ...

รหัสต่อไปนี้ใช้งานได้ดีเมื่อเลือกปุ่มตัวเลือก แต่ฉันต้องการให้มันทำงานในการโหลดหน้าเว็บด้วย - ดูเหมือนจะไม่สามารถหาวิธีทำให้สิ่งนี้เล่นบอลได้ โพสต์ (มากมาย) ที่นี่ดูเหมือนจะไม่สามารถแก้ปัญหาได้ - ฉันค่อนข้างมั่นใจว่าฉันพลาดอะไรง่ายๆ (อย่างที่คุณอาจเดาได้ว่า 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>

ขอบคุณล่วงหน้า👍🏼

ฉันจะใส่รหัสโทรกลับไว้ในฟังก์ชันและเรียกใช้เมื่อเหตุการณ์พร้อมเอกสารเริ่มทำงานแล้วเรียกมันว่าฟังก์ชันเรียกกลับของตัวฟังเหตุการณ์คลิกปุ่มตัวเลือก

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

});

ตอนนี้ฉันต้องการทำให้ DRY / มีประสิทธิภาพมากขึ้นและได้โพสต์ไว้ที่นี่ ...

คำแนะนำเพื่อให้ฟังก์ชัน jQuery นี้แห้งมากขึ้น / มีประสิทธิภาพมากขึ้น