My jquery isn't getting a value back with val() when the selector is working

Question

我正在尝试在 wordpress 的自定义程序中创建一个函数来显示某些字段，但是当我的 JS 文件中的所有内容似乎都正确对齐时，我总是返回未定义状态。

function cta() {
        //Selector for the entire radio area that "should return" the value (either "one" or "two")
        var ctaOptions = $("input[name='_customize-radio-cta-type']");

        //The ID selector for option one to check if this field is "checked"
        var ctaOne  = $('#_customize-input-cta-type-radio-one');

        //The ID selector for option Two to check if this field is "checked"
        var ctaTwo = $('#_customize-input-cta-type-radio-two');

        //This console log always returns undefined, but returns the element without the .val()
        console.log(ctaOptions.val());

        //This always returns false even when I can see in the inspector this element is checked="checked"
        console.log(ctaTwo.is(':checked'));

        if(ctaOne.is(':checked')) {
            $('#customize-control-button-two-label').addClass('hidden');
        }
        else if(ctaTwo.is(':checked')) {
            $('#customize-control-button-two-label').removeClass('hidden');
        }
    }

我正在为我的 wordpress 主题使用 unscores 样板，但不确定这是否与 javascript 中的冲突有关。我还使用检查器确认 ID 是正确的，只是出于某种原因，它在尝试获取检查或值时中断。

这里是HTML我指的地区

<li id="customize-control-cta-type" class="customize-control customize-control-radio" style="display: list-item;">
   <span class="customize-control-title">Call To Action buttons on banner</span>
   <div class="customize-control-notifications-container" style="display: none;"> 
     <ul></ul>
   </div>
   <span id="_customize-description-cta-type" class="description customize- 
    control-description">How many buttons do you want?
   </span>
                
   <span class="customize-inside-control-row">
    <input id="_customize-input-cta-type-radio-one" type="radio" aria- 
     describedby="_customize-description-cta-type" value="one" name="_customize- 
     radio-cta-type" data-customize-setting-link="cta-type">
    <label for="_customize-input-cta-type-radio-one">one</label>
   </span>
   <span class="customize-inside-control-row">
    <input id="_customize-input-cta-type-radio-two" type="radio" aria- 
     describedby="_customize-description-cta-type" value="two" name="_customize- 
     radio-cta-type" data-customize-setting-link="cta-type" checked="checked">
    <label for="_customize-input-cta-type-radio-two">two</label>
   </span>
</li>

Answer 1

尝试围绕您当前的 js 函数设置一个 setTimeout(function()，可能是您的 js 脚本在 php 实际填充输入之前加载。

$( document ).ready( function () {
setTimeout( function () {

//Your function goes here...

}, 1);
} );

编辑 1： 关于您最后的评论。如果输入值旨在从用户输入中获取，那么您应该添加一个事件侦听器。像这样...

$('#_customize-input-cta-type-radio-two, input[name="_customize-radio-cta-type"], #_customize-input-cta-type-radio-two').change(function(){

});

Answer 2

我得出的结论是我的问题不是 javascript，而是选择器的根源。我仍然无法修复它，但我的问题无法回答，因为这不是问题所在。感谢您的反馈。

编辑 1： 发现问题！问题根本不是我的 JS。这是我引入上一个文件的方式。我需要将 JavaScript 文件排队到 customize_controls_enqueue_scripts。当我把我的脚本添加到一个新的 JS 文件并将下面的代码放入我的 customize.php

function theme_slug_customizer_controls() {
    wp_enqueue_script( 'theme-customizer-controls', get_template_directory_uri() . '/js/customize-controls.js', array( 'jquery' ), '20170412', true );
}
add_action( 'customize_controls_enqueue_scripts', 'theme_customizer_controls' );

My jquery isn't getting a value back with val() when the selector is working

My jquery isn't getting a value back with val() when the selector is working

javascript

wordpress

jquery

wordpress-theming