Img-src只通过javascript更改一次
Img src only changing once through javascript
好吧,我在博客上建立了一个投票系统。很像这里的斯塔克弗流。该系统在博客的第一篇帖子上运行良好,但每隔一篇帖子,点击图片时都不会发生变化,但实际的投票过程仍在进行中。
为什么?任何帮助都会很棒!
这是我的JS:
function upvote(id)
{
sender = new XMLHttpRequest();
if(document.getElementById("upvoteimg").src.indexOf("voted") == -1) //have they already voted up?
{
document.getElementById("upvoteimg").src = "assets/upvoted.png"; // change to upvoted
sender.open("GET","/like/index/" + id ,true);
sender.send();
document.getElementById("likes").innerHTML = parseInt(document.getElementById("likes").innerHTML) +1; //update #
}
else
{
document.getElementById("upvoteimg").src = "assets/upvote.png"; //change to not upvoted
sender.open("GET","/like/index/" + id ,true);
sender.send()
document.getElementById("likes").innerHTML = parseInt(document.getElementById("likes").innerHTML) - 1; //update #
}
}
function downvote(id)
{
sender = new XMLHttpRequest();
if(document.getElementById("downvoteimg").src.indexOf("voted") == -1) //have they already downvoted?
{
document.getElementById("downvoteimg").src = "assets/downvoted.png"; //change to downvoted
sender.open("GET","/like/down/" + id ,true);
sender.send()
document.getElementById("likes").innerHTML = parseInt(document.getElementById("likes").innerHTML) - 1; //update #
}
else
{
document.getElementById("downvoteimg").src = "assets/downvote.png"; //change to not downvoted
sender.open("GET","/like/down/" + id ,true);
sender.send()
document.getElementById("likes").innerHTML = parseInt(document.getElementById("likes").innerHTML) +1; //update #
}
}
在我看来,以下是按钮:
<!-- Voting System -->
<div id="post-vote">
<% #DownVote %>
<%if user_signed_in?%>
<%if Dislikes.where(:user_id => current_user.id, :article_id =>a.id).size == 0%>
<%= image_tag("downvote.png", "onclick" => "downvote(#{a.id})", "id" => "downvoteimg") %>
<%else%>
<%= image_tag("downvoted.png", "onclick" => "downvote(#{a.id})", "id" => "downvoteimg") %>
<%end%>
<%else%>
<%= image_tag("downvote.png", "onclick" => "alert('You must login to vote.')", "id" => "downvoteimg") %>
<%end%>
<% #TheNumber %>
<span id="likes" class="vote-count"><%= a.likes.size - Dislikes.where(:article_id =>a.id).size%></span>
<% #UpVote %>
<%if user_signed_in?%>
<%if !a.likes.include?(current_user)%>
<%= image_tag("upvote.png", "id" => "upvoteimg", "onclick" => "upvote(#{a.id})") %>
<%else%>
<%= image_tag("upvoted.png", "id" => "upvoteimg", "onclick" => "upvote(#{a.id})") %>
<%end%>
<%else%>
<%= image_tag("upvote.png", "id" => "upvoteimg", "onclick" => "alert('You must login to vote.')") %>
<%end%>
</div>
将js中的所有图像都更改为具有唯一id document.getElementById("upvoteimg")
到document.getElementById("upvoteimg" + id)
并且视图中的所有图像到<%= image_tag("downvoted.png", "onclick" => "downvote(#{a.id})", "id" => "downvoteimg#{a.id}") %>
相关文章:
- 显示数字,然后每5秒随机更改一次(javascript)
- 使函数只运行一次(Javascript)
- 仅当javascript的新内容出现时,才每3秒更新一次javascript
- 每天递减一个变量一次 - Javascript
- 每个用户/浏览器会话只加载一次Javascript
- 使用Greasemonkey每5秒执行一次Javascript
- 我想在窗口加载后只调用一次JavaScript setInterval函数
- 如何只包含一次javascript文件
- 每周运行一次 JavaScript 函数
- 每天为每个新用户运行一次 JavaScript 函数
- 每 10 次访问(重新加载)显示一次 JavaScript 函数
- 简单嵌套的 setTimeout() 只运行一次 (JavaScript)
- 如何只添加一次JavaScript库
- 每X分钟运行一次JavaScript命令
- 每两次切换播放器一次JavaScript-AngularJS
- 追加一次javascript href link
- 当使用局部视图时,只添加一次javascript代码
- 查找匹配的img src并删除它存在不止一次- Javascript
- 加载cookie时只重载一次javascript页面
- 如何使这个函数运行不止一次JavaScript/jQuery