如何創建隱藏/顯示切換-有解無憂

我有兩張帶有隱藏/顯示開關的翻轉卡。但是當我單擊第二張翻蓋卡上的隱藏/顯示按鈕時，它不起作用。我怎樣才能做到這一點，以便在單擊第二張翻轉卡上的隱藏/顯示開關時，它開始作業。我希望你明白。

這是我的翻牌



<div id="main">
        <div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">     
<h1>????????</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
                                <button id='button' >hide/show</button>
                 <p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
         </div>
          <div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
                    
<h1>????????</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
                               <button id='button' >hide/show</button>
                <p id="newpost" style="display: none;" > Test text</p>
<hr />              
</div>
</div>
</label>
          </div>
</div>

這是我的隱藏/顯示按鈕腳本

<script>
var button = document.getElementById('button');

button.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};
</script>

我希望你可以幫助我

我嘗試了很多選擇，但每個都有某種門框。例如，我在一個中嘗試了其他腳本，根本沒有顯示文本，在第二個選項中，當我在第二張翻牌上按下隱藏/顯示時，它顯示了第一張翻牌上的文字。

uj5u.com熱心網友回復：

歡迎來到stackoverflow。

根據 W3C 標記驗證服務工具，該檔案包含許多錯誤，包括“重復 ID”錯誤。（參見：W3C 驗證器）

注意： id 全域屬性定義了一個識別符號（ID），它在整個檔案中必須是唯一的。其目的是在鏈接（使用片段識別符號）、腳本或樣式（使用 CSS）時識別元素。（參見：MDN 上的HTML id ）

所以我們需要使用一個類而不是newpost?id來定位這些元素。

將 HTML 更改為以下內容 - 通過格式化代碼并修復這些錯誤：

<div id="main">
    <div style="margin-left: 50px;">
        <input type="checkbox" />
        <div class="flip-card">
            <div class="front">
                <h1>????????</h1>
                <p style="font-size: 50px;">1</p>
            </div>
            <div class="back">
                <h1>About me</h1>
                <hr />
                <p>some text</p>
                <button type="button">hide/show</button>
                <p class="newpost" style="display: none;"> Test text</p>
                <hr />
            </div>
        </div>
    </div>
    <div style="margin-left: 50px ;">
        <input type="checkbox" />
        <div class="flip-card">
            <div class="front">

                <h1>????????</h1>
                <p style="font-size: 50px;">1</p>
            </div>
            <div class="back">
                <h1>About me</h1>
                <hr />
                <p>some text</p>
                <button type="button">hide/show</button>
                <p class="newpost" style="display: none;"> Test text</p>
                <hr />
            </div>
        </div>
    </div>
</div>

腳本：

此腳本掃描整個 DOM 中的所有button元素。然后，每當您單擊 a 時button，它首先會找到該parentElement按鈕的，然后將第一個元素與newpost相應parentElement.

<script>
    document.querySelectorAll('button').forEach((button) => {
        button.addEventListener('click', (event) => {
            const newpostElement = event.target.parentElement.querySelector('.newpost');
            if (newpostElement.style.display !== 'none')
                newpostElement.style.display = 'none';
            else
                newpostElement.style.display = 'block';
        })
    });
</script>

了解 HTML 錯誤：

元素name屬性的無效使用div
無效使用padding: ;
元素div不允許作為元素的子元素label
該label元素最多可以包含一個button, input, meter, output, progress, select, 或textarea后代。
重復 ID 按鈕。

uj5u.com熱心網友回復：

根據你的問題，我理解你想要這樣的東西：=

$("h1").on("click", function(){
    console.log($(this).children("div"));
    $(this).siblings("div.content").slideToggle();
});?

.content{
 display:none;
 margin: 10px;   
}

h1{
    font-size: 16px;
    font-wieght: bold;
    color: gray;
    border: 1px solid black;
    background: #eee;
    padding: 5px;
}
h1:hover{
 cursor: pointer;
 color: black;   
}

<div class="article">
    <h1>TITLE 1</h1>
    <div class="content">content 1</div>
</div>
<div class="article">
    <h1>TITLE 2</h1>
    <div class="content">content 2</div>
</div>
<div class="article">
    <h1>TITLE 3</h1>
    <div class="content">content 3</div>
</div>
<div class="article">
    <h1>TITLE 4</h1>
    <div class="content">content 4</div>
</div>

http://jsfiddle.net/Rwx7P/3/

uj5u.com熱心網友回復：

您有兩個具有相同 ID 的塊（button和newpost），它必須在一頁上始終不同。

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

<div id="main">
  <div name="first flip card" style="margin-left: 50px; padding: ">
    <label>
      <input type="checkbox" />
      <div class="flip-card">
        <div class="front">
          <h1>????????</h1>
          <p style="font-size: 50px">1</p>
        </div>
        <div class="back">
          <h1>About me</h1>
          <hr />
          <p>some text</p>
          <button onclick="toggle('newpost1')">hide/show</button>
          <p id="newpost1" style="display: none">Test text</p>
          <hr />
        </div>
      </div>
    </label>
  </div>
  <div name="second flip card" style="margin-left: 50px">
    <label>
      <input type="checkbox" />
      <div class="flip-card">
        <div class="front">
          <h1>????????</h1>
          <p style="font-size: 50px">1</p>
        </div>
        <div class="back">
          <h1>About me</h1>
          <hr />
          <p>some text</p>
          <button onclick="toggle('newpost2')">hide/show</button>
          <p id="newpost2" style="display: none">Test text</p>
          <hr />
        </div>
      </div>
    </label>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453131.html

標籤：javascript html jQuery css

上一篇：螢屏中心不是元素的文本

下一篇：如何垂直對齊html表單？[復制]