使用JS在两个HTML元素之间切换

Question

希望制作一个交互式登录页面，我希望访问者单击一个HTML元素，该元素然后消失并被另一个替换。

我提供了以下代码供您查看，并提供了代码笔链接：https://codepen.io/riza-khan/pen/pMrWKw

问题在于切换不起作用，并且在多次单击后h4和p标签都完全消失了。我试图切换.hide类在CSS中的位置（由于某种原因，这有所作为，我不明白为什么）。

const switchElements = document.querySelectorAll('.switch');

for(const switchElement of switchElements) {
    switchElement.addEventListener('click', (e) => {
       e.target.classList.toggle('hide');
       e.target.nextSibling.classList.toggle('hide')
    })
}

.main{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}   
.three-points {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: repeat(3,1fr);
    i {
        display:grid;
        justify-content: center;
    }
    h4 {
        display:grid;
        align-content: center;
        justify-content: start;
        border:solid;
    }
  }
}
.hide {
    display: none;
}

<div class="main">
  <div class="three-points">
     <i class="fab fa-google fa-5x"></i><h4 class="switch">SEO Optomized</h4><p class="switch hide">Utilizing best practices to ensure page is ranked appopriately</p>
      <i class="fa fa-mobile fa-5x"></i><h4 class="switch">Responsive Design</h4><p class="switch hide">Lorem ipsum dolor sit amet consectetur, adipisicing elit. At autem culpa possimus facere. Recusandae.</p>
      <i class="fa fa-window-maximize fa-5x"></i><h4 class="switch">Elegant Themes</h4><p class="switch hide">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt quis consequatur asperiores. Odit, voluptates nihil.</p>
  </div>
</div>

好，所以问题在于JS正在寻找nextSibling。第一次单击后，如何使用if函数从 previousSibling 中删除.hide？

---

Answer 1

问题出在您的CSS中。最大的问题是括号不平衡，因此未找到.hide定义。第二个问题是嵌套定义不是CSS。他们看起来少些或无聊。

Answer 2

您好，请检查以下逻辑，以隐藏/显示 h 和 p 标记。 还可以在 p 标签

中点击事件

var switchElements = document.getElementsByClassName("switch");
var i;

for (i = 0; i < switchElements.length; i++) {
  switchElements[i].addEventListener("click", function() {
    this.classList.toggle("active");
    if(this.classList.contains("hide")){
          // hide on <p> tag click
          this.style.display = "none";
          this.previousSibling.style.display = "block";
    }else{
          this.style.display = "none";
          var content = this.nextElementSibling;
          if (content.style.display === "block") {
            content.style.display = "none";
          } else {
            content.style.display = "block";
          }
    }

    

  });
} 

.main{
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}  
.hide {
    display: none;
}

.three-points {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: repeat(3,1fr);
  i {
      display:grid;
      justify-content: center;
  }
  h4 {
      display:grid;
      align-content: center;
      justify-content: start;
      border:solid;
  }
}

<div class="main">
  <div class="three-points">
     <i class="fab fa-google fa-5x"></i><h4 class="switch">SEO Optomized</h4><p class="switch hide">Utilizing best practices to ensure page is ranked appopriately</p>
      <i class="fa fa-mobile fa-5x"></i><h4 class="switch">Responsive Design</h4><p class="switch hide">Lorem ipsum dolor sit amet consectetur, adipisicing elit. At autem culpa possimus facere. Recusandae.</p>
      <i class="fa fa-window-maximize fa-5x"></i><h4 class="switch">Elegant Themes</h4><p class="switch hide">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt quis consequatur asperiores. Odit, voluptates nihil.</p>
  </div>
</div>

Answer 3

我认为问题是由于您将事件侦听器立即添加到所有元素而引起的。而是尝试根据需要动态添加和删除事件侦听器。您应该将.hide类添加到HTML中除第一个（显示为默认值）元素之外的所有元素。我已经测试了以下内容：

const switchElements = document.querySelectorAll('.switch');
let activeElement = 0

let cycleElements = function() {
    switchElements[activeElement].removeEventListener('click', cycleElements)
    switchElements[activeElement].classList.add('hide')

    if (activeElement >= switchElements.length - 1) {
        activeElement = 0
    } else {
        activeElement++
    }

    switchElements[activeElement].addEventListener('click', cycleElements)
    switchElements[activeElement].classList.remove('hide')
}

switchElements[activeElement].addEventListener('click', cycleElements)

添加如下所示的类：

<div class="main">
<div class="three-points">
    <i class="fab fa-google fa-5x"></i><h4 class="switch">SEO Optomized</h4><p class="switch hide">Utilizing best practices to ensure page is ranked appopriately</p>
    <i class="fa fa-mobile fa-5x"></i><h4 class="switch hide">Responsive Design</h4><p class="switch hide">Lorem ipsum dolor sit amet consectetur, adipisicing elit. At autem culpa possimus facere. Recusandae.</p>
    <i class="fa fa-window-maximize fa-5x"></i><h4 class="switch hide">Elegant Themes</h4><p class="switch hide">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt quis consequatur asperiores. Odit, voluptates nihil.</p>
</div>
</div>

Answer 4

编辑开始：

不确定是否要对此提出另一个问题，但是我想知道为什么移动CSS类.hide会破坏以下代码：

谢谢

编辑结束：

想通了。

必须添加另一个侦听

标记的单击的Eventlistener。代码如下：

HTML：

<div class="main">

<div class="three-points">

  <i class="fa fa-google fa-5x"></i><h4 class="switch">SEO Optomized</h4><p class="back hide">Utilizing best practices to ensure page is ranked appopriately</p>
  <i class="fa fa-mobile fa-5x"></i><h4 class="switch">Responsive Design</h4><p class="back hide">Lorem ipsum dolor sit amet consectetur, adipisicing elit. At autem culpa possimus facere. Recusandae.</p>
  <i class="fa fa-window-maximize fa-5x"></i><h4 class="switch">Elegant Themes</h4><p class="back hide">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt quis consequatur asperiores. Odit, voluptates nihil.</p>

</div>

</div>

CSS：

.main {


    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2,1fr);



    .three-points {

        .hide {

            display: none;
        }


        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: repeat(3,1fr);

            i {
                display:grid;
                justify-content: center;
            }

            h4 {
                display:grid;
                align-content: center;
                justify-content: start;
                border:solid;
            }
    }
}

JS：

const switchElements = document.querySelectorAll('.switch');

for(const switchElement of switchElements) {
    switchElement.addEventListener('click', (e) => {

        e.target.classList.add('hide');
        e.target.nextSibling.classList.remove('hide');

    })
}

const backElements = document.querySelectorAll('.back');

for (const backs of backElements) {
    backs.addEventListener('click', (e) => {
        e.target.classList.add('hide');
        e.target.previousSibling.classList.remove('hide');
    })
}

Answer 5

好吧，我不会说这是一个合法的答案，因为我没有用JS解决这个问题。

但是现实是，总是有多种方法可以解决（或者您可以称其为hack）问题。

这是我在生产中使用过很多次的方法，不需要一行JavaScript。

我不会重复使用您的代码，而是编写自己的代码以使其保持原样，但是这种想法很容易应用于您的案例。

如果要保持打开状态，可以将收音机更改为复选框。

label {
  display: block;
  border: 1px solid red;
}

input {
  display: none;
}

div {
  visibility: hidden;
}

input:checked ~div {
  visibility: visible;
}

<label for="radio1">
  <input type="radio" id="radio1" name="toggler">
  toggle 1
  <div>
    this is the first content
  </div>
</label>

<label for="radio2">
  <input type="radio" id="radio2" name="toggler">
  toggle 2
  <div>
    this is the second content
  </div>
</label>

<label for="radio3">
  <input type="radio" id="radio3" name="toggler">
  toggle 3
  <div>
    this is the third content
  </div>
</label>