Question

我面临着js的问题。我有一个喜欢的按钮，我想当人们点击我喜欢的按钮时它会增加1个数量。当我点击我的2-6按钮时，他们在我的第一个按钮中添加1。有什么解决方案吗？查看本网站以便更好地了解www.webcrews.net

我希望即使刷新后这个更改也是永久性的。

var clicks = 0;

function onClick(){
	clicks += 1;
	document.getElementById("clicks").innerHTML = clicks;
	return false;
};

.like_btn{
    position: absolute;
    bottom:5%;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    left: 5%;
	
}

.fa-thumbs-o-up{
	float:left;
	cursor:pointer;
}

.count{
margin-left:15px;
font-family:"Lato" , sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="single_portfolio">
                            <div class="portfolio_overlay">
                                <div class="portfolio_hover top-1_hover">
                                    <a href="">VIEW</a>
                                    <h6>Agrodristi</h6>
                                    <p>Web Development</p>
                                    <div class="like_btn"><i class="fa fa-thumbs-o-up" onClick="onClick()"></i><span class="count" id="clicks">0</span></div>
                                </div>
                            </div>
                                <img src="img/top-1.jpg" alt="portfolio" />
                            
                        </div>
                        <div class="single_portfolio">
                            <div class="portfolio_overlay">
                                <div class="portfolio_hover top-2_hover">
                                    <a href="">VIEW</a>
                                    <h6>Telemax</h6>
                                    <p>Web Development</p>
                                    <div class="like_btn"><i class="fa fa-thumbs-o-up" onClick="onClick()"></i><span class="count" id="clicks">0</span></div>
                                </div>
                            </div>
                                <img src="img/top-2.jpg" alt="portfolio" />
                            
                        </div>
                        <div class="single_portfolio">
                            <div class="portfolio_overlay">
                                <div class="portfolio_hover top-3_hover">
                                    <a href="">VIEW</a>
                                    <h6>FZ Pizza</h6>
                                    <p>Web Design & Development</p>
                                   <div class="like_btn"><i class="fa fa-thumbs-o-up" onClick="onClick()"></i><span class="count" id="clicks">0</span></div>
                                </div>
                            </div>
                               <img src="img/top-3.jpg" alt="portfolio" />
                            
                        </div>

Answer 1

你必须使用PHP，Node.js，Python，Java等服务器端技术在服务器上迭代你的计数器。您将创建一个处理请求的路由，递增计数器，然后返回带有某种成功/失败消息的响应。要存储您的计数，您可以使用数据库（如MySQL），键值存储（如Redis）或只是一个平面文件......取决于您想要挑战自己多少。

如果您对学习如何实现一些简单的AJAX处理感兴趣，请查看这篇简短的AJAX + PHP tutorial。

Answer 2

您需要一个数据服务来存储更改，并且在您的应用程序中，您需要向服务添加xhr调用以获取数据。

简而言之，在不使用服务或使用localstorage的情况下，刷新后无法进行永久性更改。

我想用js永久改变html

2 个答案: