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

Why do I have to click twice for the button to work and how can I fix this?

本文关键字：何解决 解决 工作 问题 为什么 按钮 两次      更新时间：2023-09-26

除了我连续点击两次按钮后，该函数才能完美执行。

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;}

因为您的
<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。

因为您还没有将图像的显示设置为内联块。。

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

修复问题

请参阅此处的演示

在页面加载时，您的图像似乎没有显示"内联块"。在你的css文件中添加这样的内容：

img.user_upload { display: inline-block;}

UPDATE：看起来图像甚至没有标准的显示属性。至少你不能用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-这应该适用于这两种情况：

当你标记这个问题jQuery时，你可以在jQuery:中做同样的事情，简单得多

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

onclick属性可能是维护噩梦。Nicer可以在处理事件的同一个地方连接事件。

toggle负责可见性检查，这样您就不会遇到这些问题

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

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

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

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

如果页面中已经有jQuery，那么jQuery确实是一种可行的方法。代码通常比同等的原始JavaScript短得多，更容易阅读和维护。

相关文章：