[英]Img src only changing once through javascript
好吧,即時通訊在我的博客上建立了投票系統。 就像這里的stackoverflow一樣。 該系統在博客文章的第一篇文章中工作正常,但是在其他每篇文章中,單擊圖像時它們都不會改變,但是實際的投票過程仍在進行中。
這是為什么? 任何幫助將是巨大的!
這是我的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}") %>
到<%= image_tag("downvoted.png", "onclick" => "downvote(#{a.id})", "id" => "downvoteimg#{a.id}") %>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.