Question

单击按钮时，使用onClick功能，我将图像替换为另一个图像。代码就是这个

<a class="blue_button" onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"
href="javascript:getsupport('zip')" id="download">
<img id="zip" src="img/zip.png">
<img id="loading" src="img/loading.gif">
</a>

在css我有这个：

    .blue_button{
    display:block;
    height:30px;
    margin-right:20px;
    float:left;
    width:110px;
    color:#FFF;
    font-size:12px;
        border-radius:4px;
        padding:0 23px 0 20px;
    }

        .blue_button img{
            position:relative;


top:5px;
        margin-right:7px;
    }

    .blue_button img#loading{
        display:none;
        float:left;
        top:-17px;
    }

它可以在每个浏览器中运行，而不是IE9。如果我激活兼容模式它可以工作，但我需要保持标准模式。

==已解决== 使用不引人注目的js。感谢所有

window.onload = loading;
function loading()
{
    document.getElementById('download').onclick = function()
    {
        document.getElementById('zip').style.visibility = 'hidden';
        document.getElementById('loading').style.display = 'block';
    }
}

Answer 1

我想我发现了问题：

onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"

onclick事件不需要javascript:

如果你包含其余的JavaScript，我可以测试它。

你也有onclick和href。您可能只想使用其中一个。您可能需要查看addEventListener()，您可以阅读更多相关信息here。

另一方面，你的CSS类命名非常糟糕。你不想把它们称为蓝色，红色等。可以改变。你想让它们保持语义。

阅读：What Makes For a Semantic Class Name?

Answer 2

你正在使用一个名为loading的对象。但它不存在它的DOM id。所以你需要先使用document.getElementById（“loading”）（或querySelector）从页面中检索它。

尝试将您的代码更改为

onClick="document.getElementById("loading").style.display='block';onClick="document.getElementById("zip").style.visibility='hidden';"

Answer 3

正如@Allan所说，你有太多的事情在继续，你依赖副作用和范围超载

我就是这样做的：

普通JS

window.onload=function() {
  document.getElementById("download").onclick=function() {
    document.getElementById("loading").style.display='block';
   // use .display='none' to remove, 
   // visibility='hidden' to hide but leave the space
    document.getElementById("zip").style.display='none'; 
    getsupport('zip');
    return false;
  }
}

jQuery的：

$(function() {
  $("#download").on("click",function() {
    $("#loading").show();
    $("#zip").hide(); 
    getsupport('zip');
    return false;
  });
});

两种情况下的HTML：

<a class="blue_button" href="#" id="download"><img id="zip" src="img/zip.png"><img id="loading" src="img/loading.gif"></a>

Javascript适用于IE 9以外的所有浏览器

3 个答案: