Question

我试图获得一个类似自定义的按钮，输出数量为“喜欢”的数字＆＃39;用户点击按钮后显示。

理想的用户案例流程

第1步：[用户] - 用户点击＆＃39; custom＆＃39;像按钮
第2步：[SYSTEM] - 系统显示当前喜欢的数量。
第3步：[用户] - 用户尝试再次按下按钮。
第4步：[SYSTEM] - 系统不会生效。

问题：

不幸的是，在目前这个时候，这可以像用户喜欢的那样多次操作。如果单个用户在一次访问期间想要一个页面，则可以将其视为10次。

当前代码：

HTML

class Comment < ActiveRecord::Base
    belongs_to :post  # and this one is singularized
end

CSS

<div id="like">

    <input type="image" src="images/love.png" alt="Like" title="Like" width= "34" height="33" id="heart" onClick="onClick()">
    <div>
        <span id="output"></span>
    </div>

的Javascript

#like {
    margin: 26px 30px 0px 0px;
}

@-webkit-keyframes pulse 
{
    from {
        -webkit-transform: scale(1.0);
        opacity: 1.0;
    }
    50% {
        -webkit-transform: scale(1.2);
        opacity: 1.0;
    }
    to { 
        -webkit-transform: scale(1.0);
        opacity: 1.0;
    }
}

#heart:hover 
{ 
    -webkit-animation-name: pulse; 
    -webkit-animation-duration: 0.5s; 
    -webkit-animation-iteration-count: 2; 
}

#output
{
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: white;
    margin-right: 7px;
    margin-left: 7px;
    float: right;
    align-content: center;          
}

Answer 1

只需设置一个标记，看看他们是否已经点击过。假设您正在存储此服务器端，您还可以在恢复数据后设置标志，以实现跨负载的一致行为。

var clicks = 50;
var hasClicked = false;

    function onClick() 
    {
        if(!hasClicked)
        {
           clicks += 1;
           document.getElementById("output").innerHTML = clicks;
           hasClicked = true;
        }

    };

单个像每个用户的计数

1 个答案: