使用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標簽中的click事件

 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會破壞以下代碼：

謝謝，

編輯結束：

弄清楚了。

必須添加另一個偵聽點擊事件的事件監聽器

標簽。 代碼如下：

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>