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">

修复了问题

<强> See the DEMO here

Answer 3

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

尝试：

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

现在，当你运行它时，它会识别出有一个元素并将样式设置为无。

Answer 4

看起来您的图片没有显示＆＃34;内联块＆＃34;在页面加载。将这样的内容添加到您的css文件中：

img.user_upload { display: inline-block;}

Answer 5

更新：似乎图像甚至没有标准的显示属性。至少你不能用e.style.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 - 这适用于两种情况：~~

为什么我必须单击两次按钮才能工作，我该如何解决这个问题？

5 个答案: