Question

除非点击两次，否则我的onclick功能不会被激活。我是javascript的新手，但到目前为止，我在var obj行中移动，并更改了==＆＃34; none＆＃34; to＆＃34; none＆＃34;？＆＃34;空＆＃34 ;;这些都是我不了解的事情，但看到其他人也解决了这个问题。都没有奏效。

<a href="#" onClick="showDiv('show1')">+</a>

function showDiv(id){
var obj = document.getElementById(id);
if( obj.style.display == "none") {
obj.style.display='block'
}
else{
obj.style.display='none'    
}
}


<div id="show1">
Roughly 2-3 months.
</div>

Answer 1

您的问题是，您直接使用元素的style属性。假设您没有明确地在代码中设置obj.style.display = "none";，那么在第一次点击之前，该值仍为undefined。第一次点击后，它就会被设置，一切都像你想要的一样。

要解决此问题，请使用getComputedStyle()来访问元素的样式。这包括通过CSS设置的所有样式：

function showDiv(id){
  var obj = document.getElementById(id),
      compStyle = window.getComputedStyle( obj );
  if( compStyle.display == "none") {
    obj.style.display='block'
  } else {
    obj.style.display='none'    
  }
}

Answer 2

您应该使用strict equal operators来防止未定义的样式规则。

我宁愿使用addEventListener而不是onclick来保持我的代码更清晰，这里有一个jsfiddle与我的版本（一些额外的数据集和三元条件存在，但在你的例子中不一定需要它们）

var showDiv = function (ev) {

  var id = ev.currentTarget.dataset.id;
  var obj = document.getElementById('show' + id);

  obj.style.display = (obj.style.display === "none") ? 'block' : 'none';
};

http://jsfiddle.net/mindcookin/06nvkay7/4/

onclick必须被点击两次才能开火

2 个答案: