WordPress在HOVER-jQuery上显示特色图像。延迟异常：未定义hrefValue

我正在尝试创建在链接悬停时显示以图片为特色的帖子的网站。

示例：

所以我开始学习基本的jQuery和php，并尝试使用get_the_post_thumbnail($post_id);函数来实现这一点，该函数根据post id返回图像。为了获取id，我使用了url_to_postid();wordpress函数。正如它所说的：&q；检查一个URL并尝试确定它所代表的帖子ID。&q；因此，$url是必需的。所以我想我可以通过编写脚本来传递变量，该脚本从On MouseOver获得‘href’：

$('#bio-box').find('a').mouseover(function() {
    var hrefValue = ($(this).attr('href'))
   console.log(hrefValue)
});

然后，为了将此变量传递给php，我使用了Ajax jQuery

 $.ajax({
        url: '/wp-admin/admin-ajax.php',
        data: {
            'action': 'php_tutorial',
            'php_test': hrefValue
        },
        success: function(data){
            console.log("happy")
        }
    });

遗憾的是，此操作未成功，因为Console返回：

jquery.min.js：2 jQuery.延迟异常：hrefValue未定义ReferenceError：hrefValue未定义

在HTMLDocument。(http://localhost:8888/jakubtrz-portfolio/en/studio/:159:25)
请访问e(https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005)
at t(https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307)未定义

我希望有人能给我解释一下原因，或者告诉我要达到预期效果的最佳解决方案是什么。

以下是完整的php文件：

 <?php
get_header();
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    $('#bio-box').find('a').mouseover(function() {
        var hrefValue = ($(this).attr('href'))
       console.log(hrefValue)
    });
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        data: {
            'action': 'php_tutorial',
            'php_test': hrefValue
        },
        success: function(data){
            console.log("happy")
        }
    });
}); 


</script>

<?php
function our_tutorial(){
    if(isset($_REQUEST)){
        $testing = $_REQUEST['php_test'];

        echo 'This is our JS Variable :'.$testing;

        global $wpdb;
        $wpdb->insert(
            $wpdb->prefix.'lms_enroll',
            [
                'ID' => $testing
            ]
        );

    }
    die();
}
add_action('wp_ajax_php_tutorial', 'our_tutorial');
?>

<main id="primary" class="site-main">
<div class="container position-relative my-7">

    <div class="row">
        <div class="col-lg-6" id="bio-box">
            <a href="http://localhost:8888/jakubtrz-portfolio/2021/12/21/quod-si-ita-se-habeat-non-possit/">Example post link</a>
            <a href="http://localhost:8888/jakubtrz-portfolio/2021/12/21/quid-ergo-aliud-intellege/">Example post link2</a>
        </div>

        <div class="col-lg-6">
            <div class="featured-image">
                <?php 
                    $post_id = url_to_postid($testing);
                    echo get_the_post_thumbnail($post_id);
                ?>
            </div>
        </div>
    </div>

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

<?php
get_footer();

1.编辑 控制台问题已通过发送至@vee Comment解决。

我现在纠结的是那个函数：

function our_tutorial(){
    if(isset($_REQUEST)){
        $testing = $_REQUEST['php_test'];

        echo 'This is our JS Variable :'.$testing;

        global $wpdb;
        $wpdb->insert(
            $wpdb->prefix.'lms_enroll',
            [
                'ID' => $testing
            ]
        );

    }
    die();
}
add_action('wp_ajax_php_tutorial', 'our_tutorial’);

它回显‘This is Our JS Variable：’，但没有$Testing变量。

2.编辑

再次通过thx to@vee回答使用ECHO$测试解决了问题。新的，也可能是最后一件事发生了。WordPress缩略图仍然不会更改。

---

解决方案

错误jquery.min.js：2jQuery。延迟异常：未定义hrefValue是因为您没有在可以访问的范围内声明变量。

若要解决此问题，请将var hrefValue;移至"外部文档就绪"。

See JavaScript scope reference。

var hrefValue;
$(document).ready(function() {
    $('#bio-box').find('a').mouseover(function() {
       hrefValue = ($(this).attr('href'));// just use hrefValue = xx.
       console.log(hrefValue);
    });
});

现在JS错误问题解决了，您的下一个问题是PHP无法检索值。
这是因为JS变量hrefValue为null或为Nothing，您会立即调用PHP的AJAX。

若要解决此问题，请将Ajax进程移动到分配hrefValueJS变量的位置。

示例：

var hrefValue;
$(document).ready(function() {
    $('#bio-box').find('a').mouseover(function() {
        hrefValue = ($(this).attr('href'));// just use hrefValue = xx.
        // if AJAX is here, it means it will working on mouse over.
        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            data: {
                'action': 'php_tutorial',
                'php_test': hrefValue
            },
            success: function(data){
                console.log("happy")
            }
        });
    });
});