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

Posted 2023-05-09

【中文标题】My jquery isn\'t getting a value back with val() when the selector is working [closed]

【英文标题】：My jquery isn't getting a value back with val() when the selector is working [closed]My jquery isn't getting a value back with val() when the selector is working [closed]

【发布时间】：2021-01-02 10:24:55

【问题描述】：

我正在尝试在 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>

【问题讨论】：

This console log always returns undefined, but returns the element without the .val() 你确定是这样吗？即使没有找到任何元素，jQuery 选择器也总是返回一个对象。尝试检查console.log(ctaOptions.length) 以查看是否实际找到任何元素。如果输出为0，则您的问题是无效的选择器。如果没有 HTML 示例来重现问题，我们真的无能为力

您能否edit 您的问题包括该应用到的 HTML 部分？正如 Rory 所说，当我们看不到你拥有的东西时，为什么它找不到元素，我们真的无能为力:)

我只有你的回复。你是对的。我的长度为 0。我会解决这个选择器问题。

还有两个收音机。使用 val() 只会给出集合中第一个的值。您没有考虑检查哪一项

如果换行符确实在 HTML 属性值中，那就是你的问题。删除它们

【参考方案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()

);

【讨论】：

这是一个非常丑陋的 hack。有更好的方法来管理动态插入的元素

这是有道理的。我试图从函数中删除代码，它应该只在页面刷新时加载。每次我单击单选按钮时，它都会刷新页面。这很可能意味着 PHP 在 JS 之后加载。

嘿@charlietfl，这是真的，这是一个丑陋的黑客，大部分时间都有效。这主要是为了调试，如果它最终正常工作，那么我们就知道问题出在哪里，我们可以采取行动。

嘿@davidb3rn 你需要让脚本在点击和页面加载时运行，你的问题可能来自于此。您目前仅在页面加载时运行脚本，而不是在事件时运行。

关于您的最后评论，请参阅编辑 1

【参考方案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' );

【讨论】：

祝你好运！

谢谢，感谢您的帮助！