显示/隐藏元素 JS答案

【问题标题】：show/hide an element JS显示/隐藏元素 JS
【发布时间】：2021-07-22 12:34:17
【问题描述】：

按钮可以显示，但显示后不能隐藏元素。你能告诉我哪里错了吗？

document.querySelector('.btn1').onclick = function(e) {
  let a = document.querySelector('.btn1content')
  if (a.style.display = ('none')) {
    a.style.display = ('block')
  } else {
    a.style.display = ('none')
  }
}

.btn1content {
  display: none;
}

<button class="btn1" BUTTON</button>
<p class="btn1content">Lorem ipsum</p>

【问题讨论】：

在您的if/else 中，您使用的是赋值运算符=，而不是等于。试试if(a.style.display == ('none')) {...}。供参考：developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…
1) 第一个 = 应该是 == - 2) 初始状态将是 "" 而不是 "none"，考虑到这一点或使用 getComputedStyle
为什么所有这些不必要的( )？为什么没有分号？
把class="btn1"BUTTON改成class="btn1">BUTTON，把a.style.display = ('none')改成这个a.style.display === 'none'
@Andreas：同意括号，但分号是个人风格的问题（一些风格指南，如standardjs.com 也不使用它们）

标签： javascript html css

【解决方案1】：

你没有关闭按钮标签。试试这个

<button class="btn1">BUTTON</button>
<p class="btn1content">Lorem ipsum</p>

jQuery 将是

$(document).ready(function () {
            document.querySelector('.btn1').onclick = function (e) {
                let a = document.querySelector('.btn1content')
                if (a.style.display == ('none')) {//there will ==
                    a.style.display = ('block')
                } else {
                    a.style.display = ('none')
                }
            }
            
        });

【讨论】：

这解决了 3 个问题中的 2 个 - 初始样式将为 ""，因此第一次需要单击两次才能显示按钮
@CherryDT 初始样式将显示为无，如 css 中所述
不，这不会是因为它来自 CSS 规则，而不是直接应用于元素的样式。初始 computed 样式将为 "none"，但此代码不使用 getComputedStyle。

【解决方案2】：

HTML

<button class="btn1">BUTTON</button>
<p class="btn1content">Lorem ipsum</p>

jQuery

$(document).on('click', '.btn1', function(){
    $('.btn1content').toggle()
})

注意 - 无需更改任何 CSS

【讨论】：