如何在第一次单击后禁用链接,并允许用户仅在登录时进行投票

时间:2015-03-16 23:26:11

标签: javascript php jquery ajax wordpress

我正在使用wordpress插件来投票或使用ajax投票。 一切正常,但问题是第一次点击后无法禁用onclick eventhandler所以每当有人投票时,他都可以多次添加投票。我想忽略这一点,所以我应该只能投票一次。如果我点击投票,那么应该禁用voteup锚标签,并且应该启用votedown锚标签。同时,如果我点击投票的锚标签,那么应该禁用votedown并启用voteup。此外,我只想在用户登录wordrpess时启用投票功能。

如果用户未登录,我有一个显示弹出窗口的功能。 即login_open();

如果用户未登录并尝试投票,则此功能应执行login_open();

否则用户应该只能投票或下注一次..

这是我的代码//

PHP

//Defining Base Paths
define('VOTEUPURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
define('VOTEUPPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );

//Enqueue Script for the Admin Ajax and Cutom Js File
function voteme_enqueuescripts()
{
    wp_enqueue_script('voteme', VOTEUPURL.'/js/voteup.js', array('jquery'));
    wp_localize_script( 'voteme', 'votemeajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
    wp_localize_script( 'votedown', 'votedownajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

add_action('wp_enqueue_scripts', voteme_enqueuescripts);


//Adding Vote up links to all the posts.
function voteme_getvotelink(){
$votemelink = "";

$post_ID = get_the_ID();
$votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';

$link = $votemecount.' <a href="javascript:void(0);" onclick="votemeaddvote('.$post_ID.');">'.'Vote Up'.'</a>';

$link .=' <a href="javascript:void(0);" onclick="votemedownvote('.$post_ID.');">'.'Vote Down'.'</a>'; 

$votemelink = '<div id="voteme-'.$post_ID.'">';
$votemelink .= '<span>'.$link.'</span>';
$votemelink .= '</div>';

return $votemelink;
}

//Function to get the count
function get_current_vote_count(){
    $voteup_count = "";
    $post_ID = get_the_ID();
    $votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';
    $votelink = '<span class="vote_count">'. $votemecount .'</span>';
    return $votelink;
    die($votelink);
}


//Add Vote Function
function voteme_addvote()
{
    $results = '';
    global $wpdb;
    $post_ID = $_POST['postid'];
    $votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';
    $votemecountNew = $votemecount + 1;
    update_post_meta($post_ID, '_votemecount', $votemecountNew);
    $results.=$votemecountNew;
    // Return the String
    die($results);
}

// creating Ajax call of ADD VOTE for WordPress
add_action( 'wp_ajax_nopriv_voteme_addvote', 'voteme_addvote' );
add_action( 'wp_ajax_voteme_addvote', 'voteme_addvote' );


//Add Vote Function
function voteme_downvote()
{
    $results = '';
    global $wpdb;
    $post_ID = $_POST['postid'];
    $votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';
    $votemecountNew = $votemecount - 1;
    update_post_meta($post_ID, '_votemecount', $votemecountNew);
    $results.= $votemecountNew;
    // Return the String
    die($results);
}

// creating Ajax call of DOWN VOTE for WordPress
add_action( 'wp_ajax_nopriv_voteme_downvote', 'voteme_downvote' );
add_action( 'wp_ajax_voteme_downvote', 'voteme_downvote' );

// Javascript和Ajax调用

function votemeaddvote(postId)
{
    jQuery.ajax({
    type: 'POST',
    url: votemeajax.ajaxurl,
    data: {
    action: 'voteme_addvote',
    postid: postId
},

success:function(data, textStatus, XMLHttpRequest){

    var vote_count_id = jQuery('.vote_count');
    jQuery(vote_count_id).html('');
    jQuery('.vote_count').append(data);
    var thisr = jQuery('.voter button:first-child')
    thisr.disable = true;
    // add any additional logic here
    }, 
    error: function(MLHttpRequest, textStatus, errorThrown){
        alert(errorThrown);
        }
    });
}

function votemedownvote(postId)
{
    jQuery.ajax({
    type: 'POST',
    url: votemeajax.ajaxurl,
    data: {
    action: 'voteme_downvote',
    postid: postId
},

success:function(data, textStatus, XMLHttpRequest){

    var vote_count_id = jQuery('.vote_count');
    jQuery(vote_count_id).html('');
    jQuery('.vote_count').append(data);
    },
    error: function(MLHttpRequest, textStatus, errorThrown){
        alert(errorThrown);
        }
    });
}

//用于添加投票的HTML

<div class="voter">
 <a  onclick="votemeaddvote(<?php echo $post_ID; ?>);">VoteUp</a>
 <a  onclick="votemedownvote(<?php echo $post_ID; ?>)">Vote Down</a>
</div>

2 个答案:

答案 0 :(得分:3)

简单地使用.one()代替.on()

尝试这样的事情,

$(".voter a:last-child").one( "click", function() {
   console.log("click");
   var data = $(this).data();
   console.log(data);
   votemedownvote(data.id);
});

答案 1 :(得分:2)

所以你可以做的就是改变你的一些代码

将html更改为:

<div class="voter">
  <a data-id="<?php echo $post_ID; ?>">VoteUp</a>
  <a data-id="<?php echo $post_ID; ?>">Vote Down</a>
</div>

并且因为你正在使用jquery而改变你的javascript:

$(".voter a").on( "click", function() {
   console.log("click");
   var data = $(this).data();
   console.log(data);
   votemeupvote(data.id);
   $(this).off();
});

所以var data get有json形式的post id要发送。 使用&#34;这个&#34;您可以定位此特定元素并将其单击关闭。我删除了你的嵌入式点击事件,因为通常你想引导那些触发器,这样你就可以关闭它们,这是你的问题。 您可以使用jquery .on和.off方法来完成此操作。

编辑:忘记添加你的函数调用。我加了。我还将添加您的投票方式如何运作:

$(".voter a:last-child").on( "click", function() {
   console.log("click");
   var data = $(this).data();
   console.log(data);
   votemedownvote(data.id);
   $(this).off();
});

编辑2:哦,我忘了提到这只对前端有利。因此,在后端,您需要在某种程度上跟踪该人是否投票,也许是一个具有用户ID,帖子ID和投票真或假的表格。这样你可以在ajax调用到来时跟踪它并让php更新数据库。

Fiddle