我正在尝试创建非常简单的 wordpress 插件，但我的 javascript 无法正常工作

Posted 2023-05-09

【中文标题】我正在尝试创建非常简单的 wordpress 插件，但我的 javascript 无法正常工作

【英文标题】：I'm tring to create very simple wordpress plugin but my javascript not working

【发布时间】：2021-10-22 20:12:48

【问题描述】：

我已经连接了javascript文件

入队脚本函数是：

function wpplugin_admin_scripts()
   wp_enqueue_script(
    'myplugin-admin',
    WPPLUGIN_URL.'admin/js/eylonplugin-admin.js',
    ['jquery'],
    time()
   );

 
 add_action('admin_enqueue_scripts', 'wpplugin_admin_scripts', 100);

但是当我尝试设置一些属性的样式时，我做不到。

这是我将html 添加到我的插件页面的功能：

 function my_plugin_plugin_html() ?>
    
    <div id="wrap container">
        <h3> Plugin Header </h3>
    
        <form method="post" action='options.php'>
            <?php settings_errors(); ?>
            <?php settings_fields('my_plugin_option_group'); ?>
            <label for="my_plugin_field_plugin">Top bar color</label>
            <input name="my_plugin_field" id="my_plugin_field_plugin" type="text" value="<?php echo get_option('my_plugin_field')?>"><br>        
            <div>
            <?php submit_button('my_plugin I love you');?> 
        </form>
        <h2 id="js_checking">my_plugin<span class="selected_output"></span></h2>
        <script> </script>
        </div>
        <h3>My color is red</h3>
        <button id="try_me">Try me!</button>
    <?php

在这里，我尝试设置 h3 属性的样式，但没有任何反应。但是警报正在起作用。

$("h3").css("color","red");
alert("Hello world");

【问题讨论】：

使用 JavaScript 而不是 CSS 来设置元素样式的原因是什么？

我只是想检查我的 javascript，我也尝试使用 .hide() 但它也不起作用。

要做的事情还太少。您是否遇到任何错误？当你console.log($('h3')) 时会发生什么？ jQuery 是否使用无冲突模式？ （这意味着您需要使用jQuery('h3').css('color', 'red'); 而不是$ 符号。

可能是!important规则的原因，换其他标签试试其他样式看看结果

谢谢。我用这段代码发现了问题 > jQuery(document).ready(function($) jQuery("h3").css("color", "red"); );

【参考方案1】：

如下包装你的 jquery 代码，这样你就可以在不使用 jQuery 而不是 $ 的情况下添加代码：

(function ($) 

YOUR CODES HERE

)(jQuery);