为什么必须单击两次才能使按钮起作用，如何解决此问题？

Question

除了仅连续两次单击按钮后，该功能的执行效果非常理想。

 function hideable(id) { var e = document.getElementById(id); if (e.style.display == 'inline-block') e.style.display = 'none'; else e.style.display = 'inline-block'; } 

 <img class="user_upload" src="upload/0000000000.gif" alt="1024 KB, 500x309" title="1024 KB, 500x309" id="0000000000"> <span id="hide_image" onclick="hideable('0000000000');">hide image</span> 

编辑：对不起，我应该指定。 这是我已经在使用的CSS，但仍然无法使用（即使使用内联代码块也是如此）

img.user_upload {
height: 75px; display: inline-block; float: left;
margin: 0px 20px 10px 0px;}

Answer 1

当您标记这个问题jQuery您可以在jQuery中简化很多操作：

$('#hide_image').click(function() {
    $(this).prev('img').toggle();
});

onclick属性可能是维护的噩梦。 更好地将事件连接到您处理的地方。

toggle会处理可见性检查，因此您不会遇到这些问题。

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/ztgLom3p/

要使用多个按钮，请在跨度上使用类而不是ID：

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/ztgLom3p/1/

$('.hide_image').click(function() {
    $(this).prev('img').toggle();
});

如果您已经在页面中使用jQuery，那么它确实是您可以使用的方法。 与等效的原始JavaScript相比，该代码通常更短，更易于阅读和维护。

Answer 2

因为您尚未将图像的显示设置为嵌入式块。

<img class="user_upload" src="http://placehold.it/350x150" alt="1024 KB, 500x309" title="1024 KB, 500x309" id="0000000000" style="display:inline-block">

解决了这个问题

在这里查看演示

Answer 3

因为你的
<img class="user_upload" src="upload/0000000000.gif" alt="1024 KB, 500x309"title="1024 KB, 500x309" id="0000000000">
还不包含显示样式，它在您的if语句中返回null，并正在触发else情况。

尝试：

<img class="user_upload" src="upload/0000000000.gif" alt="1024 KB, 500x309" title="1024 KB, 500x309" id="0000000000" style="display:inline-block"> 

现在，当您运行它时，它将识别出一个元素，并将样式设置为none。

Answer 4

看起来您的图像在页面加载时没有显示“内联块”。 在您的css文件中添加以下内容：

img.user_upload { display: inline-block;}

Answer 5

更新：似乎图像甚至没有标准的显示属性。 至少您不能使用e.style.display阅读它们。
首先，未设置display属性，因此您必须更改条件：

function hideable(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'inline-block' || e.style.display == '')
      e.style.display = 'none';
   else if(e.style.display == 'none')
      e.style.display = 'inline-block';   
}

JSFiddle： http : //jsfiddle.net/v4sc6mtb/1/

图像的标准显示属性是inline -在两种情况下均应如此：