为鼠标悬停添加计数器(自定义字段)

时间:2015-02-26 作者:mikiekwoods

我正试图为每个帖子计算div上的鼠标数。div位于循环内。我快到了,我想你可能得帮我纠正一些错误。

div和jquery。请注意,我使用the\\u ID()给div一个CSS ID,这允许Jquery将其作为目标。它使用AJAX将post id传递给addHit。php

<div class="loop-entry-details" id="post<?php echo the_ID() ?>">
<script> 
$(\'#post<?php echo the_ID() ?>\').mouseover(function(){   
    postID = <?php echo the_ID() ?>;
    $.ajax({
        type: "POST",
        url: "addHit.php",
        data:{ post_id: postID }, 
        success: function(data){
            console.log(data); 
        }
    })
}
</script>
</div>
添加命中。位于主题根目录中的php

$post_id = $_POST[\'post_id\'];

function addHit2($post_id){
$key = \'hits\';
$themeta = get_post_meta($post->ID, $key, TRUE);


if($themeta != \'\') {
    add_post_meta($post_id, $key, 1);
} else {
    update_post_meta($post_id, $key, 1);
}
    }
addHit2($post_id);
似乎不起作用。怎么了?

1 个回复
最合适的回答,由SO网友:David Gard 整理而成

首先,一些推荐阅读-AJAX in Plugins.

我意识到这不是一个插件,但Codex仍然是相关的,正如您将在PHP部分中看到的,您可以使用WP AJAX处理程序来处理前端调用以及来自管理区域的调用。

为此,最好将JS放在外部*。页面中包含的js文件。这样,您就可以只拥有一块代码,而不是对循环中的每个帖子重复它。

要捕获mouseenter 其中任何一项的事件<divs> 我们可以添加一个类(请参见PHP 然后在发出AJAX请求之前获取ID。

你会注意到在我前面提到的段落中mouseenter, 不mouseover; 这是因为mouseenter 每次访客悬停在<div>, 其中为mouveover 每次移动鼠标时都会重复发射。

jQuery(document).ready(function($){

    $(\'.update-hover-count\').on(\'mouseenter\', function(){
    
        var data = {
            action:     \'update_hover_count\',                   // The AJAX action to carry out
            post_id:    $(this).attr(\'id\').replace(/\\D/g, \'\')   // The numerical ID of the post that has been hovered
        }
        
        /** Make the AJAX request */
        $.post(MyAjax.ajaxurl, data, function(response){
        
            // This is the success function, do somthing here if you wish but you don\'t have to.
            
        }).fail(function(){
        
            // Do something to log a failure, if you wish but you don\'t have to.
            
        });
        
    });
    
});
使用内置WordPress AJAX处理程序时(wp-admin/admin-ajax.php) WP的所有优点都可用于AJAX调用。这也意味着您不必为AJAX例程创建独立的文件,您可以将其添加到functions.php 它是通过一个钩子调用的(尽管您仍然可以将其保存在自己的文件中,并根据需要将其包含在该文件中)。

由于这将(我假设)在前端,您必须将上述内容本地化admin-ajax.php 脚本,使其可用,但也可以添加到functions.php

/**
 * Localize the admin-ajax script
 */
add_action(\'wp_enqueue_scripts\', \'my_localize_ajax_admin\');
function my_localize_ajax_admin(){

    /** For AJAX requests */
    wp_enqueue_script(\'my-ajax-request\', admin_url(\'admin-ajax.php\'), array(\'jquery\'));
    wp_localize_script(\'my-ajax-request\', \'MyAjax\', array(\'ajaxurl\' => admin_url(\'admin-ajax.php\')));
    
}

/**
 * AJAX call to update the number of times a post is hovered
 */
add_action(\'wp_ajax_update_hover_count\', \'my_update_hover_count\');          // For users who are logged in
add_action(\'wp_ajax_nopriv_update_hover_count\', \'my_update_hover_count\');   // For users who are NOT logged in
function my_update_hover_count(){

    $post_id = $_POST[\'post_id\'];   // Extract the ID of the post that was hovered
    
    /** Grab the postmeta value for \'hits\' for \'post_id\' */
    $key = \'hits\';
    $hits = get_post_meta($post_id, $key, TRUE);
    
    /** Check to see if any hits have been previously recoreded */
    if($hits) : // They have, update the postmeta key
        $new_hits = intval($hits + 1);
        update_post_meta($post_id, $key, $new_hits, $hits);
    else :  // They have not, create the postmeta key
        add_post_meta($post_id, $key, 1);
    endif;
    
    echo get_post_meta($post_id, $key, TRUE);
    
    die();  // Required for a proper result
    
}
现在,处理AJAX调用的脚本位于*。js文件,模板文件中的HTML使用AJAX例程要简单得多。

<div id="post-<?php the_ID() ?>" <?php post_class(\'update-hover-count\'); ?>>

    <!-- Add additional HTML here -->
    
</div>

结束

相关推荐

WP AJAX API with JS file

因此,我很难将我的联系方式设置为我正在构建的主题。它使用JqBootstrapValidation插件。有人告诉我,这不起作用的原因是,当js通过AJAX调用时,WP没有被加载contact-me.php 文件因此,如果有人能在此基础上实现WP-ajaxapi,我将非常感激,因为我一点都不知道。顺便说一句,JS文件工作得很好。正在验证字段,我在发送表单时收到一条成功消息。以下是Js代码:(function($) { $(\"input,textarea\").jqBootstrapVal