1

我正在尝试制作在链接悬停时显示帖子特色图片的网站。

例子：

https://i.stack.imgur.com/tsXWS.gif

所以我开始学习基本的 jQuery 和 php，并尝试通过使用get_the_post_thumbnail($post_id);基于 post id 返回图像的函数来实现这一点。为了获得 id，我使用url_to_postid();了 Wordpress 功能。正如它所说：“检查一个 URL 并尝试确定它所代表的帖子 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")
        }
    });

不幸的是，这是不成功的，因为控制台返回：

jquery.min.js:2 jQuery.Deferred 异常：未定义 hrefValue 参考错误：未定义 hrefValue

在 HTML 文档。(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)
在 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 评论解决。

我现在正在努力的是这个功能：

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 缩略图仍然没有改变。

4

2 回答 2

2

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

要解决此问题，请移至var hrefValue;准备好的外部文档。

请参阅 JavaScript 范围参考。

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或什么都没有，并且您立即对 PHP 进行 AJAX 调用。

要解决此问题，请将 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")
            }
        });
    });
});
于 2021-12-25T21:04:17.890 回答
0

解决方案

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

});
于 2021-12-25T20:45:28.200 回答