Question

这是html代码。

<script type="text/javascript">
function func() {

    if (document.getElementById("heart").src == "heart_empty.png") 
    {
        document.getElementById("heart").src = "heart_filled.png";
    }
    else if(document.getElementById("heart").src == "heart_filled.png")
    {
        document.getElementById("heart").src = "heart_empty.png";
    }
}
</script>
<img id="heart" src='heart_empty.png' onclick="func()" />

Javascript函数func（）无效。

Answer 1

您的第二个else if只有一个=。它应该是一个比较，所以它应该像第一个一样使用==。

始终尝试使用严格比较运算符===来确保您处理相同的类型。如果类型不同，则应在比较之前进行转换。

function func() {
    if (document.getElementById("heart").src == "heart_empty.png")  {
        document.getElementById("heart").src = "heart_filled.png";
    } else if(document.getElementById("heart").src == "heart_filled.png") {
        document.getElementById("heart").src = "heart_empty.png";
    }
}

此外，由于看起来只有两种状态，因此您不必拥有第二种else if。只需跳到else。

function func() {
    var heart = document.getElementById("heart");

    if (heart.src == "heart_empty.png") {
        heart.src = "heart_filled.png";
    } else {
        heart.src = "heart_empty.png";
    }
}

Answer 2

您可以使用背景图片吗？所以有一个div，根据你的不同，你有不同的图像作为背景。

<强> HTML

<div class="heartImg filled"></div>

<强> CSS

.filled {
    background-image: url(filled.jpg);
}
.empty {
    background-image: url(empty.jpg);
}

<强> Jquery的

$('.heartImg').click(function(){
    $(this).toggleClass('filled empty');
}

Answer 3

<强>你好

尝试使用“？”运算符对于这个实例

您当前的代码如下：

function func() {
  if (document.getElementById("heart").src == "heart_empty.png") 
   {
  document.getElementById("heart").src = "heart_filled.png";
  }
  else if(document.getElementById("heart").src == "heart_filled.png")
  {
      document.getElementById("heart").src = "heart_empty.png";
  }
}

相反，使用“？”运算符将您的函数压缩成一行：

此外，不是每次都获取元素，而是在页面底部添加一个如下所示的脚本：

var src = document.getElementById("heart").src;

这不仅可以减少延迟，还可以提高代码的可读性

新脚本将使用“？”的事实运算符可以将“if”语句组合成一行声明。总结一下，操作员这样做：

variable = condition ? /*true*/ : /*false*/

将您的（true）代码放在“true”位中，与false位相同如果条件为真，那么它将“变量”设置为写入“true”位的代码，否则，它将把它设置为写入“false”位的代码。

所以现在有了这些新发现的知识，我们可以更新我们的代码!!!

新代码：

function func() {
  document.getElementById("heart").src =
  document.getElementById("heart").src === "heart_empty.png" ?
  "heart_filled.png" : "heart_empty.png";
}

这可以通过使用上述符号进一步压缩，其中“src”variable = document.getElementById（“heart”）。src，现在看起来像：

function func() {
  src = src === "heat_empty.png" ? "heart_filled.png" : "heart_empty.png";
}

好多了！现在你的代码整洁，紧凑，完美无缺！

Answer 4

第二个 else if 语句有一个 = 而不是两个。需要比较，所以用==。

function func() {
    if (document.getElementById("heart").src == "heart_empty.png")  {
    document.getElementById("heart").src = "heart_filled.png";
    } else if(document.getElementById("heart").src == "heart_filled.png") {
    document.getElementById("heart").src = "heart_empty.png";
    }
}

另外，因为你只有两个语句，你可以简单地使用 else 而不是 else if。

function func() {
    if (document.getElementById("heart").src == "heart_empty.png")  {
    document.getElementById("heart").src = "heart_filled.png";
    } else (document.getElementById("heart").src == "heart_filled.png") {
    document.getElementById("heart").src = "heart_empty.png";
    }
}

HTML img onclick javascript函数无效

4 个答案: