Question

我有一个带箭头系统的投票脚本（upvotes和downvotes）。如果用户点击upvote，箭头将变为绿色箭头，表示已注册投票。如果他们再次点击，我希望箭头恢复原始图像。但是，使用我的代码，它会更改第一个图像，但不会在第二次单击时恢复。

if (like.src = 'vote_triangle.png') {
  like.src = 'vote_triangle_like.png';
} else {
  like.src = 'vote_triangle.png';
}

Answer 1

使用更宽松的if语句，如：

if (like.src.indexOf('vote_triangle.png')!=-1) {
  like.src = 'vote_triangle_like.png';
} else {
  like.src = 'vote_triangle.png';
}

Answer 2

我知道这是一个非常古老的主题，但我想在此处添加我的发现以供将来参考。

我发现以下代码无效：

function swapImage() {
    var element = document.getElementById("myImage");        

    if (element.src == "image1.png") {
        element.src = "image2.png";
    } else {
        element.src = "image1.png"
    }
}

显示包含element.src的警告告诉我它包含本地计算机中图像的完整路径。因此，if语句总是被评估为false。

为了以合乎逻辑的方式解决这个问题，我所做的是获取元素的属性，如下面的代码所示。

function swapImage() {
    var element = document.getElementById("myImage");

    if (element.getAttribute("src") == "image1.png") {
        element.src = "image2.png";
    } else {
        element.src = "image1.png";
    }
}

通过使用函数getAttribute("attributeName")，我能够相对于项目目录检索src中包含的路径。

Answer 3

我建议，不要使用img源作为条件语句，而是使用全局变量，一旦点击upvote，改为其状态为+1并且为downvoted -1。

//when 0, show upvote image, make it a global by declaring before any function
var UpVote = 0;

//when upvote clicked, when greater than 0, show down vote img
UpVote = UpVote +1 ;

//conditional logic for img source
if(UpVote > 0){
  like.src = 'vote_triangle.png';
}
else{
  like.src = 'vote_triangle_like.png';
}

Javascript if / else语句使用image src作为条件

3 个答案: