如何使用 vanilla JavaScript 编写我在 JQuery 中编写的切换函数? [英] How do I use vanilla JavaScript to write a toggle function I wrote in JQuery?

问题描述

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

JQuery:

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

HTML:

<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 照片"><div class="card-body"><p class="card-text">Brian 是 AO Adventures 的创始人，也是 BarrelProof Podcast 的原始主持人.<button type="button" class="btn btn-danger aboutBtn">关于 Brian 的更多信息<;/button></p>
<div id="more-brian" class="隐藏"><p id="brian-para">Brian 是一位对足球充满热情的丈夫和父亲.他已经参加了 50 多场美国男子和女子国家队在世界各地的比赛.在业余时间，他是 BarrelProof 播客的联合主持人.</p>

我尝试过这样的事情:

功能切换(id){var div1 = document.getElementById(id);如果(div1.style.display == '无'){div1.style.display = '块'} 别的 {div1.style.display = '无'}}

我没有在 CSS 'hide' 类中使用它.但它在页面加载时显示 div，然后用按钮隐藏它，我希望相反的情况发生.

解决方案

如果我正确理解了您的问题，您希望在活动类和非活动类之间切换，例如添加/删除它，例如用于菜单.所以，当你点击元素 A，显示元素 B，然后再次点击元素 A 隐藏元素 B，你可以这样做:

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

希望这能解决问题:)

Was trying to get this code working for hours yesterday using JavaScript because I'd really like to get the basics down as best possible, but finally gave up and wrote it in JQuery. Would love some advice on how to write in in vanilla JS. I am just trying to use a button to show a hidden "div" so I feel like it should be simple and I'm just overlooking something:

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>

I tried something like this:

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

I didn't use this with the CSS 'hide' class. But it was showing the div on page load, then hiding it with the button, and I want the opposite to happen.

解决方案

If I understood your question correctly, you'd like to toggle between a class being active and inactive, like adding / removing it, for example for a menu. So, when you click element A, to display element B, and then click element A again to hide element B, you can do it like this:

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

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

Hopefully this clears things up :)

这篇关于如何使用 vanilla JavaScript 编写我在 JQuery 中编写的切换函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！