Блог

Главная - Вопросы по программированию - Я пытаюсь создать очень простой плагин wordpress, но мой javascript не работает

Я пытаюсь создать очень простой плагин wordpress, но мой javascript не работает

#javascript #php #jquery #wordpress #wordpress-plugin-creation

Вопрос:

Я уже подключил 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");

Комментарии:

1. В чем причина использования JavaScript вместо CSS для стилизации элементов?

2. Я просто хочу проверить свой javascript, я также пытался использовать .hide (), и он тоже не работает.

3. Все еще слишком мало, чтобы продолжать. Вы сталкиваетесь с какими-либо ошибками? Что происходит, когда ты console.log($('h3')) ? Использует ли jQuery режим отсутствия конфликтов? (это означает, что вам нужно использовать jQuery('h3').css('color', 'red'); вместо $ символа.

4. Может быть, это из-за !important правила, попробуйте другой стиль для другого тега и проверьте результат

5. Спасибо. Я обнаружил проблему, я использовал этот код > jQuery(документ). готово(функция($){ jQuery(«h3»).css(«цвет», «красный»); });

Ответ №1:

Оберните свой код jquery, как показано ниже, чтобы вы могли добавлять коды без использования jQuery вместо $:

 (function ($) {

YOUR CODES HERE

})(jQuery);
Метки: ,