如何使用普通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“隱藏”類中使用它。 但是它在頁面加載時顯示了div，然后用按鈕將其隱藏，我希望情況相反。

Answer 1

如果我正確理解了您的問題，則希望在一個活動的類和不活動的類之間進行切換，例如為菜單添加/刪除它。 因此，當您單擊元素A以顯示元素B，然后再次單擊元素A以隱藏元素B時，您可以這樣做：

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

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

希望這可以解決問題:)

Answer 2

 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 3

hidden屬性將解決問題。

<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;
    }
}

Answer 4

元素具有名為classList的屬性，您可以對其進行一些操作。

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

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

讓我知道是否有幫助。

Answer 5

我相信您要查找的屬性是“ className”。 嘗試這個：

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

然后，它定義CSS中兩個類的可見性。