1

在 Google+ Hangouts API 中工作，我试图简单地切换 div 的可见性。让它工作，但它需要在触发前单击两次（然后只需要来回单击一次）。这似乎是一个常见的切换问题，但解决方案总是不同。大概是件容易的事。一点帮助？谢谢！

<script>
//Fetches and displays participants
function showParticipants() {
  var participants = gapi.hangout.getParticipants();

  var retVal = '<p>Participants: </p><ul>';

  for (var index in participants) {
    var participant = participants[index];

    if (!participant.person) {
      retVal += '<li>A participant not running this app</li>';
    }
    retVal += '<li>' + participant.person.displayName + '</li>';

  }

  retVal += '</ul>';

//Toggles visibility of participantsDiv
  var div = document.getElementById('participantsDiv');
  if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }

  div.innerHTML = retVal;

}

function init() {
  // When API is ready...                                                         
  gapi.hangout.onApiReady.add(
      function(eventObj) {
        if (eventObj.isApiReady) {
          document.getElementById('showParticipants')
            .style.visibility = 'visible';
        }
      });
}

// Wait for gadget to load.                                                       
gadgets.util.registerOnLoadHandler(init);
</script>
4

2 回答 2

2

我可以看到的一个可能的情况是，当您的 div 最初通过其他方式隐藏时，例如使用 css。这可能会发生，因为您的比较if (div.style.display !== 'none')将成功，因为显示属性大部分为空或未定义（基于浏览器），它将应用于none显示，然后由于您的比较，它将开始正常工作。

试试这个方法：

if (div.style.display && div.style.display !== 'none') {
    div.style.display = 'none';
} else {
    div.style.display = 'block';
}

小提琴

或将其简化为：

    var div,display;
    div = document.getElementById('participantsDiv');
    display = div.style.display;
    div.style.display = (display && display !== 'none') ? 'none' : 'block';

在上面的示例中，我最初提供了一个 CSS 类来隐藏 div。删除它并看到相同的行为发生。

于 2013-09-20T03:10:27.983 回答
0

可能是因为participantsDiv在display执行if(display !== 'none'). 如果是这种情况，它会触发两次，因为当它看到 NULL 值的类型与您的字符串值不同时，该语句返回 FALSE。

于 2013-09-20T03:10:53.550 回答