如何使用 vanilla JavaScript 编写我在 JQuery 中编写的切换函数？

Question

昨天使用 JavaScript 试图让这段代码工作几个小时，因为我真的很想尽可能地把基础知识写下来，但最终放弃并在 JQuery 中写了它。想要一些关于如何用 vanilla JS 编写的建议。我只是想用一个按钮来显示一个隐藏的 "div" 所以我觉得它应该很简单而且我只是忽略了一些东西：

JQuery:

$('document').ready(function() {
    $('.aboutBtn').click(function() {
        $('#more-brian').toggleClass('hide');
    });
})

HTML:

<div class="row">

            <div class="card col-sm-6">
            <h5 class="card-title">Brian Davis</h5>
              <img class="card-img-top" src="../soccer-travel-site/img/brian-davis.jpg" alt="Brian Davis photo">
              <div class="card-body">
                <p class="card-text">Brian is the founder of AO Adventures and an original host of the BarrelProof Podcast.<button type="button" class="btn btn-danger aboutBtn">More About Brian</button></p>
              </div>
            <div id="more-brian" class="hide">
                <p id="brian-para">Brian is a husband and father who is very passionate about soccer. He has been to over 50 U.S. Men's and Women's National Team games all around the world. In his spare time he is a co-host of the BarrelProof Podcast.</p>
            </div>
            </div>

我试过这样的事情：

function toggle(id){
    var div1 = document.getElementById(id);
    if (div1.style.display == 'none') {
        div1.style.display = 'block'
    } else {
        div1.style.display = 'none'
    }
}

我没有将它与 CSS 'hide' class 一起使用。但它在页面加载时显示 div，然后用按钮隐藏它，我希望相反的情况发生。

Answer 1

元素有一个名为 classList 的属性，您可以运行对其进行一些操作。

function toggle(id, className){
  document.getElementById(id).classList.toggle(className);
}

看一看https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

如果有帮助请告诉我。

Answer 2

如果我对你的问题的理解正确，你想在 class 处于活动状态和不活动状态之间切换，例如添加/删除它，例如用于菜单。所以，当你点击元素A，显示元素B，然后再次点击元素A隐藏元素B，你可以这样做：

const elementClicked = document.querySelector("#elementClicked");
const elementYouWantToShow = document.querySelector("#elementYouWantToShow");

elementClicked.addEventListener("click", ()=>{
  elementYouWantToShow.classList.toggle("theClassYouWantToToggleBetween");
});

希望这能解决问题:)

Answer 3

document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('.button');
  const elementToToggle = document.getElementById('element');    

  button.addEventListener('mousedown', () => {
    elementToToggle.classList.toggle('hide');
  });
});

#element {
  height: 100px;
  width: 200px;
  margin-top: 15px;
  background: #ddd;
}

#element.hide {
  display: none;
}

<button class="button">Toggle</button>
<div id="element"></div>

Answer 4

我相信您要找的属性就是 "className"。试试这个：

function toggle(id){
   var x = document.getElementById(id);
   if(x.className == "hide") x.className = "show";
   else x.className = "hide";
}

然后它定义类在 CSS 中的可见性方面。

Answer 5

hidden attribute 会成功的。

<div id="more-brian" hidden>
<p id="brian-para">Brian is a husband and father who is very passionate [...]</p>
</div>

而js函数是这样的

function toggle(id) {
    var div1 = document.getElementById(id);
    if(div1.hidden) {
        div1.hidden = false;
    } else {
        div1.hidden = true;
    }
}

如何使用 vanilla JavaScript 编写我在 JQuery 中编写的切换函数？

How do I use vanilla JavaScript to write a toggle function I wrote in JQuery?

javascript

jquery

toggle

show-hide