个人中心
gpt4 book ai didi

javascript - 使用 HTML 页面上的后退按钮根据用户点击显示/隐藏 div

转载 作者：行者123 更新时间：2023-12-02 23:06:32 26 4
gpt4 key购买 nike

下面我在 HTML 中分为三个部分。我使用 jquery 根据用户点击按钮来隐藏和显示这些 div。我还有一个后退按钮。如何跟踪用户点击，以便可以显示之前查看过的部门用户

<div id="signupform" style="display: block;">
    <form id="signupForm" style="position: relative;">
        <div id="floatContainer1" class="float-container mt-4">
            <label for="floatField1">E-mail Id</label>
            <input type="email" id="floatField1" data-placeholder="abc@xyz.com" required>
        </div>
        <button type="button" class="btn-block btn-orange mt-4 p-3">Verify</button>
    </form>
</div>
<div id="otpform" style="display: none;" class="my-5">
    <div id="wrong_otp" class="position-absolute text-danger text-left" style="top: -30px;display: none;">
        Please enter the correct OTP
    </div>
    <form id="verify_otp" style="position: relative;">
        <div id="floatContainer2" class="float-container mt-4">
            <label for="floatField2">Verify OTP</label>
            <input type="text" id="floatField2" data-placeholder="Please Enter the 6-Digit OTP" required>
        </div>
        <button type="button" class="btn-block btn-orange mt-4 p-3">Verify</button>
    </form>
</div>

最佳答案

这是一个小示例，展示了一种跟踪用户单击的最后一个 div 然后显示它的方法。它会删除用户单击的 div，然后如果单击“显示上次单击的 Div”按钮，它将在下面以黄色背景显示上次单击的 div 的内容。

这里是 JSFiddle 的链接，以便您可以看到它的实际效果:Show Last Div Fiddle 。这不使用 jQuery，但您可以根据需要对其进行转换。

HTML

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">

    .btn-wrapper {
      padding: 20px;
      border: 1px solid black;
      margin: 10px;
      width: 300px;
    }

    #div-container, #show-container {
      width: 800px;
    }

    .hidden {
      display: none;
    }

    .last-clicked {
      background: #FFFCAA;
    }

  </style>
</head>

  <body>

    <div id="div-container">

      <div class="btn-wrapper">
        <p>I'm some text in the first div</p>
        <button type="button" name="btn-1">Click Me 1</button>
      </div>

      <div class="btn-wrapper">
        <p>I'm some text in the second div</p>
        <button type="button" name="btn-2">Click Me 2</button>
      </div>

      <div class="btn-wrapper">
        <p>I'm some text in the third div</p>
        <button type="button" name="btn-3">Click Me 3</button>
      </div>

    </div>

    <div id="show-container">
      <div class="btn-wrapper">
        <button type="button" name="show">Show Last Clicked Div</button>
      </div>
    </div>

    <div id="last-clicked-container" class="hidden">

    </div>

    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

JS

var previousDivClicked;

var divContainer = document.getElementById('div-container');
var showContainer = document.getElementById('show-container');
var lastClickedContainer = document.getElementById('last-clicked-container');

divContainer.addEventListener('click', function(e) {

  if (!lastClickedContainer.classList.contains('hidden')) {
    lastClickedContainer.classList.add('hidden');
  }

  if (e.target.getAttribute('type') === 'button') {
    previousDivClicked = e.target.parentElement
    console.log(previousDivClicked);
  }

  divContainer.removeChild(previousDivClicked);

});

showContainer.addEventListener('click', function() {
  lastClickedContainer.innerHTML = '';
  lastClickedContainer.classList.remove('hidden');
  previousDivClicked.classList.add('last-clicked');
  lastClickedContainer.appendChild(previousDivClicked);
});

以下是对正在发生的事情的简要说明:

代码说明

在 HTML 中，我们有 3 个 div，其中包含按钮，单击这些按钮将隐藏 div:

<div class="btn-wrapper">
  <p>I'm some text in the first div</p>
  <button type="button" name="btn-1">Click Me 1</button>
</div>

<!-- and so on... -->

我们还有一个 div，其中包含将显示最后单击的 div 的按钮:

<div id="show-container">
  <div class="btn-wrapper">
    <button type="button" name="show">Show Last Clicked Div</button>
  </div>
</div>

还有一个隐藏的 div，我们可以在其中显示最后单击的 div:

<div id="last-clicked-container" class="hidden">

</div>

在 JS 文件中，我们获取包含所有按钮的 div 容器，单击这些按钮时，会隐藏其关联的 div，并向其中添加“click”事件的事件监听器:

// selected at the beginning of the file, shown here for reference
var divContainer = document.getElementById('div-container');

divContainer.addEventListener('click', function(e) { // rest of function after

仅当事件目标(“e”参数)是按钮时，我们才希望隐藏被单击的 div。要获取从按钮单击的 div，我们使用parentElement 属性，因为按钮是具有“.btn-wrapper”类的 div 的子级:

if (e.target.getAttribute('type') === 'button') {
  previousDivClicked = e.target.parentElement
}

上面，我们使用全局 previousDivClicked 变量来存储对按钮(e.target)所属 div 的引用，以便我们可以在必要时显示该 div。

然后我们从 div 容器中删除整个 div:

divContainer.removeChild(previousDivClicked);

这负责隐藏按钮单击来自的 div 并存储对其的引用以供以后使用。现在，当我们想要显示最后一个隐藏的 div 时，我们通过添加另一个事件处理程序来实现，这次是在显示容器的“click”事件上，其中包含带有文本“Show Last Clicked Div”的按钮: 

// done at top of script but shown for reference
var showContainer = document.getElementById('show-container');

showContainer.addEventListener('click', function() { // rest of the function follows

在此函数中，我们希望通过删除 CSS '.hidden' 类来显示 lastClickedContainer，并删除之前容器中的所有内容:

lastClickedContainer.innerHTML = '';
lastClickedContainer.classList.remove('hidden');

最后，我们向 previousClickedDiv 添加一些 CSS 样式，然后将其附加到 showContainer，以便它显示在页面上:

previousDivClicked.classList.add('last-clicked');
lastClickedContainer.appendChild(previousDivClicked);

关于javascript - 使用 HTML 页面上的后退按钮根据用户点击显示/隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57567309/

26 4 0
文章推荐： javascript - 您可以将项目 ID 数组传递给 Flatlist 吗？
文章推荐： javascript - 关于 Chromium 扩展的 i18n 实现的澄清
文章推荐： javascript - 使用 D3 在图像上绘制圆圈 - ReactJS
文章推荐： javascript - Highcharts 实心仪表未完全着色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com