Question

我目前正在建立一个网站作为我的IT课程的一部分，我有点困惑为什么有些东西不起作用。我已经知道了，当用户点击课程标题时，文本会出现提供更多信息，但我也想在他们点击时更改图片，以使其更容易理解。这是JavaScript代码：

    <script language="javascript">
function changeImage()
{
    if (document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\hiddenTab.jpg") 
     {
         document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\openTab.jpg";
         } 
         else
         {
             document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\hiddenTab.jpg";
        }
    }
  </script>

和HTML的相关部分：

    <img alt="" src="images/hiddenTab.jpg"style="height:22px; width:22px;" id="imgClickAndChange" onclick="changeImage()"/></p>

关于它为什么不起作用的任何想法？提前致谢。

编辑：是的，它现在正在工作，除了当我单击图像以折叠文本时，图像不会变回hiddenTab.jpg。关于它为什么这样做的任何想法？

Answer 1

您正在==和=语句中使用if（测试是否相等）而不是else（为变量赋值）。

P.S。：你应该改变路径来源，你的解决方案现在不那么扎实

Answer 2

你使用“==”而不是“=”第一个是布尔条件，第二个实际设置它

Answer 3

在HTML中，您使用的是相对路径和JS绝对路径。

function changeImage()
{
    if (document.getElementById("imgClickAndChange").src === "images\hiddenTab.jpg") 
     {
         // here you use "=" and not "=="
         document.getElementById("imgClickAndChange").src = "images\openTab.jpg";
     } 
     else
     {
         document.getElementById("imgClickAndChange").src = "images\hiddenTab.jpg";
     }
}

Answer 4

这只适用于您的本地计算机，即使它是正确的。绝对路径仅在计算机上具有该目录结构和文件时才能在计算机上运行。相对路径将由Web服务器相应地解释，并将与文档一起呈现给最终用户。

此外，如果您使用完整路径作为条件，那么将无法发生，您将跳转到其他路径。

分配属性值时，应使用=，当比较2个值时，应使用==

您的代码的更好版本将是：

<script language="javascript">
function changeImage()
{
if (document.getElementById("imgClickAndChange").src=="images/hiddenTab.jpg") 
     {
     document.getElementById("imgClickAndChange").src="images/openTab.jpg";
     } 
 else
     {
     document.getElementById("imgClickAndChange").src="images/hiddenTab.jpg";
     }
 }
</script>

Answer 5

希望这会有所帮助。

此document.getElementById("imgClickAndChange").src返回包含您域名的完整路径。因此，将它与“images / openTab.png”进行比较永远不会返回真实的

.getAttribute("src")会返回src属性值

的确切值

您还在分配值时使用==。 while ==用于比较，=用于分配。

 <script language="javascript">
     function changeImage() {
         if (document.getElementById("imgClickAndChange").getAttribute("src") == "images/hiddenTab.png") {
             document.getElementById("imgClickAndChange").src = "images/openTab.png";
         }
         else {
             document.getElementById("imgClickAndChange").src = "images/hiddenTab.png";
         }
     }
  </script>

点击后，JavaScript / HTML图像会发生变化

5 个答案: