Question

我不知道如何在我的WordPress子主题脚本中使用jQuery。从我的research on SO中，我将我的外部JavaScript文件放入队列，并尝试在NoConflict模式下对jQuery命令进行编码没有成功。这是我现在正在实验的准系统模板（它实际上是一个空白的page.php，我在底部添加了一个按钮和一个段落）：

<?php
/**
 *
 * Template Name: My JQ Template
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

get_header(); ?>

<?php
    global $wpdb;

    $course_result = $wpdb->get_results('SELECT * FROM SC_COURSES ORDER BY COURSE_NAME');
?>

<div id="primary" <?php //generate_content_class();?>>

</div>

<main id="main" <?php generate_main_class(); // Page title and content ?>> 
    <?php
    do_action( 'generate_before_main_content' );

    while ( have_posts() ) : the_post();
        get_template_part( 'content', 'page' );
        // If comments are open or we have at least one comment, load up the comment template.
        if ( comments_open() || '0' != get_comments_number() ) : ?>
            <div class="comments-area">
                <?php comments_template(); ?>
            </div>
        <?php endif;
    endwhile;

    do_action( 'generate_after_main_content' );
    ?>
    <br>    
    <div class="container">
        <div>       
            <input id="testbutton" type="button" onClick="myFunction()" value="POP!">
            <p>This is a test</p>
        </div>  

    </div><!-- container -->

</main><!-- #main -->

    <?php
    do_action( 'generate_after_primary_content_area' );

    get_footer();
    ?>

在functions.php中，我具有以下内容：

<?php
function enqueue_child_theme_styles() {
    if ( is_page_template( 'jqtemplate.php' ) ) {
        //deregister the parent bootstrap style and script  
        wp_deregister_style( 'bootstrap' );
        wp_deregister_script( 'bootstrap' );
        wp_deregister_script( 'mycustomjs' );

        //enqueue my child theme stylesheet
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('theme') );

        //enqueue bootstrap in the child theme 
        wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
        wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');

        //Enqueue the custom jQuery specific scripts
        wp_enqueue_script('mycustomjs', get_stylesheet_directory_uri().'/js/mycustomjs.js', array('jquery'), NULL, true);
    }
}

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

在mycustomjs.js中，我具有以下内容：

jquery(document).ready(function(){
    jquery("p").mouseenter(function(){
        jquery("p").text("This is some new text");
    });
}); 


function myFunction() {
    var txt;
    if (confirm("Press a button, mkay!")) {
        txt = "You pressed OK!";
    } else {
        txt = "You pressed Cancel!";
    }
    document.getElementById("testbutton").value = txt;
}

我很肯定脚本正在加载，因为该小小的演示可以更改按钮文本。我知道Bootstrap样式和脚本正在加载，因为在生产版本中它们是可见的。

不过，我无法让jQuery做任何事情。我尝试添加var j = jQuery.noConflict();，然后使用j代替here所述的jquery，我已将jquery更改为jQuery，并且尝试将jQuery行直接放入jqtemplate.php标头中没有成功。

我知道WordPress包含jQuery，所以我在这里缺少什么？

Answer 1

WordPress确实包含jQuery。但是它仍然必须是loaded。

加载jQuery后，只需确保使用 jQuery 而不是 jquery 。像这样：

jQuery( document ).ready( function() {

    alert( 'test to see if this is working' );

    jQuery("p").mouseenter( function() {

        jQuery("p").text("This is some new text"); 
    }); 
});

无法在WordPress子主题中使用jQuery

1 个答案: