悬停时的 Wordpress 特色图片 - jQuery.Deferred 异常：未定义 hrefValue

Question

我正在尝试制作在 link 悬停时显示 post 的特色图片的网站。

示例：

所以我开始学习基本的 jQuery 和 php 并且我尝试通过使用 get_the_post_thumbnail($post_id); 函数来实现这一目标，return 图像基于 post ID。为了获得 id，我使用了 url_to_postid(); Wordpress 函数。正如它所说：“检查 URL 并尝试确定它代表的 post ID。”所以 $url 是必需的。所以我想我可以通过编写脚本来传递变量，该脚本从鼠标悬停时获取 '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")
        }
    });

不幸的是，这是不成功的，因为控制台 returns:

jquery.min.js:2 jQuery.Deferred exception: hrefValue is not defined ReferenceError: hrefValue is not defined

at HTMLDocument. (http://localhost:8888/jakubtrz-portfolio/en/studio/:159:25)
at 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) undefined

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

这是完整的 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 评论。

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

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’);

它回显“这是我们的 JS 变量：”但没有 $testing 变量。

2。编辑

再次感谢@vee 回答 echo $testing 的问题已解决。新的，也可能是最后一件事发生了。 Wordpress 缩略图仍然没有改变。

Answer 1

解决方案

var hrefValue; // define/declare global

$(document).ready(function() {

    $('#bio-box').find('a').mouseover(function() {
// here just assign value
        hrefValue = ($(this).attr('href'))
       console.log(hrefValue)
    });

});

Answer 2

错误jquery.min.js:2 jQuery.Deferred exception: hrefValue is not defined是因为你没有在可以访问的范围内声明变量.

要解决此问题，请将 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 或什么都不是，你立即 AJAX 调用 PHP.

要解决此问题，请将 AJAX 进程移动到分配 hrefValue JS 变量的位置。

示例：

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")
            }
        });
    });
});

悬停时的 Wordpress 特色图片 - jQuery.Deferred 异常：未定义 hrefValue

Wordpress featured image on hover - jQuery.Deferred exception: hrefValue is not defined

javascript

php

wordpress-theming

hover

wordpress-featured-image