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

hidden attribute将解决问题。

public void Draw(Graphics g)
    {
        g.DrawRectangle(new Pen(Color.Green), rect);

        foreach (PosSizableRect pos in Enum.GetValues(typeof(PosSizableRect)))
        {
            g.DrawRectangle(new Pen(Color.Red), GetRect(pos));
        }


    }

        public void SetPictureBox(PictureBox p)
    {
        this.mPictureBox = p;
        mPictureBox.MouseDown += new MouseEventHandler(mPictureBox_MouseDown);
        mPictureBox.MouseUp += new MouseEventHandler(mPictureBox_MouseUp);
        mPictureBox.MouseMove += new MouseEventHandler(mPictureBox_MouseMove);
        mPictureBox.Paint += new PaintEventHandler(mPictureBox_Paint);
    }

    private void mPictureBox_Paint(object sender, PaintEventArgs e)
    {

        try
        {
            Draw(e.Graphics);
        }
        catch (Exception exp)
        {
            System.Console.WriteLine(exp.Message);
        }

    }

    private void mPictureBox_MouseDown(object sender, MouseEventArgs e)
    {
        mIsClick = true;

        nodeSelected = PosSizableRect.None;
        nodeSelected = GetNodeSelectable(e.Location);

        if (rect.Contains(new Point(e.X, e.Y)))
        {
            mMove = true;
        }
        oldX = e.X;
        oldY = e.Y;
    }

    private void mPictureBox_MouseUp(object sender, MouseEventArgs e)
    {
        //MessageBox.Show(rect.ToString());
        mIsClick = false;
        mMove = false;


    }

     private void mPictureBox_MouseMove(object sender, MouseEventArgs e)
    {
        ChangeCursor(e.Location);
        if (mIsClick == false)
        {
            return;
        }

        Rectangle backupRect = rect;

        if (e.Button == System.Windows.Forms.MouseButtons.Left)
        {

            switch (nodeSelected)
            {
                case PosSizableRect.LeftUp:
                    rect.X += e.X - oldX;
                    rect.Width -= e.X - oldX;
                    rect.Y += e.Y - oldY;
                    rect.Height -= e.Y - oldY;
                    break;
                case PosSizableRect.LeftMiddle:
                    rect.X += e.X - oldX;
                    rect.Width -= e.X - oldX;
                    break;
                case PosSizableRect.LeftBottom:
                    rect.Width -= e.X - oldX;
                    rect.X += e.X - oldX;
                    rect.Height += e.Y - oldY;
                    break;
                case PosSizableRect.BottomMiddle:
                    rect.Height += e.Y - oldY;
                    break;
                case PosSizableRect.RightUp:
                    rect.Width += e.X - oldX;
                    rect.Y += e.Y - oldY;
                    rect.Height -= e.Y - oldY;
                    break;
                case PosSizableRect.RightBottom:
                    rect.Width += e.X - oldX;
                    rect.Height += e.Y - oldY;
                    break;
                case PosSizableRect.RightMiddle:
                    rect.Width += e.X - oldX;
                    break;

                case PosSizableRect.UpMiddle:
                    rect.Y += e.Y - oldY;
                    rect.Height -= e.Y - oldY;
                    break;

                default:
                    if (mMove)
                    {
                        rect.X = rect.X + e.X - oldX;
                        rect.Y = rect.Y + e.Y - oldY;
                    }
                    break;
        }
    }
        oldX = e.X;
        oldY = e.Y;

        if (rect.Width < 5 || rect.Height < 5)
        {
            rect = backupRect;
        }

        TestIfRectInsideArea();

        mPictureBox.Invalidate();
    }

js函数就是这样

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

Answer 3

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

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

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

让我知道是否有帮助。

Answer 4

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 5

我相信您要查找的属性是“ className”。试试这个：

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

然后，它定义CSS中两个类的可见性。

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

5 个答案: