Question

我正在使用此函数，在if语句满足之前需要两次单击，即使在CSS中应该满足条件。在第一次点击时，控制台会在第二次点击时显示triggered但不显示if state它会显示if state任何人都可以理解为什么不符合条件？

function searchShow() {
    console.log('started');
    document.getElementById('top_line_2a').addEventListener('click', function() {
      console.log('triggered')
      var searchClickIcon = document.getElementById('top_line_2a');
      var searchClick = document.getElementById('top_line_3');
      if(searchClick.style.height == '0em') {
        console.log('if state');
        //searchClick.style.display = 'block';
        searchClick.style.height = '3em';
        searchClickIcon.style.color = 'white';
        searchClickIcon.style.textShadow = '0px 0px 7px white';
        document.getElementsByClassName('search')[0].focus();
      } else {
        //searchClick.style.display = 'none';
        searchClick.style.height = '0em';
        searchClickIcon.style.color = 'rgba(255, 187, 61, 1)';
        searchClickIcon.style.textShadow = '';
      }
    })
    console.log('added');
  }

Answer 1

实现乒乓/切换效果时，尽量不要直接与属性值进行比较。零高度可以是“0em”，“0”或数字0.您可以尝试规范化这一特定情况的值：

if (parseInt(searchClick.style.height,10)==0) {
  // show the container
} else {
  // hide the container
}

更可靠的方法是利用每个DOM元素可以动态分配新属性的事实。由于您已拥有searchClick对象的句柄：

if (searchClick.showing){
  searchClick.showing=null;
  // hide the container
} else {
  searchClick.showing=true;
  // show the container
}

“显示”是您自己的属性。当您第一次单击它时，标记不存在，因此它将显示容器（最初隐藏）。然后将显示标志附加到它，以便您可以在下一次单击时检测到它。如果显示初始状态，则使用其他标志来反转逻辑。这是实现切换的确定fire 方法。

Answer 2

你不应该使用高度。改为使用变量。

var triggered = false;
function searchShow() {
  document.getElementById('top_line_2a').addEventListener('click', function() {
    //Do stuff
    if(!triggered) {
      triggered = true;
      //Do stuff
    } else {
      triggered = false;
      //Do stuff
    }
  })
}

在if语句中检查样式不是一个好习惯。如果您因X原因更改了容器的大小，则还必须更改if / else语句以适应更改。它还使代码对于阅读它的人来说不那么清楚。当你可以使用更有效的东西时，总是尽量避免使用硬编码。

如果语句未得到满足，则为javascript样式

2 个答案: