Question

我正在尝试为我正在制作的网站创建喜欢和不喜欢的按钮。不幸的是，到目前为止进展并不太好。我真的为我写这篇文章的方式道歉，但我是新手。回到主题，你将如何运行PHP代码并更改onClick上的颜色。所以我有一个像按钮对吗？它基本上是一个字体很棒的图标。当我点击它时，我希望它能够变绿。但不仅如此。我想让它运行PHP代码并在点击后保持绿色。也几乎忘了提到我希望它在点击后立即为0添加+1。所以只是视觉上没有将它保存到服务器端。这是我到目前为止所得到的：

HTML：

 <font color="gray">
 <div id="buttons">
 <i id="like1" onClick="this.style.color='green';" class="fa fa-thumbs-o-up"></i></a>0&nbsp;
 <i id="dislike1" onClick="this.style.color='red';" class="fa fa-thumbs-o-down"></i></a> 0&nbsp;<br>
 Flag?&nbsp;
 <i id="flag1" onClick="this.style.color='red';" class="fa fa-flag"></i></a>&nbsp;
 </font>
 <br>
 <br>

这就是我所拥有的一切。我知道我要求很多但我真的很困惑。到目前为止，我能够改变onClick的颜色，但我还需要它在视觉上添加+1并运行php代码。例如，运行echo onClick。

Answer 1

通常你要做的是触发ajax请求onclick，返回喜欢的总数，并在更改颜色之前将其设置为类似的文本。但是，由于你只是专注于视觉部分，我只会对此发表评论。

您的HTML格式不正确。你错过了div标签的结尾，你有最终的锚标签，但没有锚。我清理了下面的html。请注意，我将您的0移动到标记中，以便您可以将其拉出并增加值。我还将like按钮onclick的值更改为函数调用。

<font color="gray">
    <div id="buttons">
        <i id="like1" onClick="like(this);" class="fa fa-thumbs-o-up">0</i>&nbsp;
        <i id="dislike1" onClick="this.style.color='red';" class="fa fa-thumbs-o-down">0</i>&nbsp;<br/>
        Flag?&nbsp;
        <i id="flag1" onClick="this.style.color='red';" class="fa fa-flag"></i>&nbsp;
    </div>
</font>
<br>
<br>

然后，您可以创建一个功能来更改颜色并增加计数

function like(obj) {
    // set the colour of the object that was clicked
    obj.style.color = "green";
    // get the innerText for the object that was clicked, parse as int, and increment by 1
    obj.innerText = parseInt(obj.innerText) + 1;
}

作为旁注，不推荐使用<font>标记，您应该使用CSS来设置文本的颜色而不是HTML

修改

要切换：

function like(obj) { if (obj.style.color === "green") { // set obj color to something other than green obj.style.color = "gray"; // get the innerText for the object that was clicked, parse as int, decrement by 1 obj.innerText = parseInt(obj.innerText) - 1; } else { // we are incrementing, so check the dislike and decrement if necessary var dislike = document.getElementById("dislike1"); if (dislike.style.color === 'red') { dislike.style.color = 'gray'; dislike.innerText = parseInt(dislike.innerText) - 1; } // set the colour of the object that was clicked obj.style.color = "green"; // get the innerText for the object that was clicked, parse as int, and increment by 1 obj.innerText = parseInt(obj.innerText) + 1; } }

Answer 2

 <font color="gray">
 <div id="buttons">
 <i id="like1" onClick="myFunction();" class="fa fa-thumbs-o-up">    </i></a>0&nbsp;
 <i id="dislike1" onClick="myFunctiondislike();" class="fa fa-thumbs-o-down">    </i></a> 0&nbsp;<br>
 Flag?&nbsp;
 <i id="flag1" onClick="this.style.color='red';" class="fa fa-flag"></i>    </a>&nbsp;
 </font>
 <br>
 <br>

 <script>
 function myFunction() {
 document.getElementById("like1").style.color = "#ff3";
 }
 function myFunctiondislike() {
 document.getElementById("dislike1").style.color = "#000";
 } 
function myFunctionflag() {
 document.getElementById("flag1").style.color = "#FFF";
 }
 </script>

Answer 3

试试这个（需要jQuery库）：

HTML：

<span class="btn like">Like</span>
<span class="btn dislike">Dislike</span>

jQuery：

$(function(){
    $(".dislike").css("display", "none");
    $(".btn").on("click", function(){
        var _text = $(this).text();
        if(_text === "Like")
        {
            $(".btn").css({"display":"inline-block"});
            $(this).css({"display":"none"});            
        }
        else
        {
            $(".btn").css({"display":"inline-block"});
            $(this).css({"display":"none"});
        }
    });
});

CSS：

span{ background-color:#999; padding:10px; color:#FFF; cursor:pointer;}

jsfiddle链接：

[link] MySQL For Mac OS X 10.9 (x86, 64-bit), DMG Archive

PHP + JS。 onClick更改颜色并运行php

3 个答案: