PHP + js.onClick更改颜色并运行php - PHP + JS. onClick change color and run php

我正在尝试为我正在制作的网站创建喜欢和不喜欢的按钮。不幸的是，到目前为止，进展并不太好。我真的为我写这篇文章的方式道歉，但我是stack的新手。回到主题，你将如何运行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.

通常情况下，您要做的是触发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;
    }
}

 <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>

试试这个(需要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链接:

[链接]http://jsfiddle.net/frayne_konok/bxgg4ry5/