單擊按鈕時刪除/隱藏多個 div

Question

我正要提出一個問題，但我實際上注意到了我的錯誤並解決了它。 因此，我不會刪除此帖子，而是將其發布以幫助那里的某些人。
[錯誤是我寫了getElemenstByClassName() ，而不是getElementsByClassName() ，這既有趣又令人沮喪]
此外，顯示/帶回div的按鈕也在那里。

這是代碼：

 var y = document.getElementsByClassName('ex') var i; function removeSamples() { for (i = 0; i < y.length; i++) { y[i].style.display = 'none'; } } function hideSamples() {; for (i = 0; i < y.length; i++) { y[i].style.opacity = '0%'; } } function removeSamples2() { for (i = 0; i < y.length; i++) { y[i].style.display = 'block'; } } function hideSamples2() {; for (i = 0; i < y.length; i++) { y[i].style.opacity = '100%'; } }

 body { background-color: rgb(25, 25, 25); } img, .ex1, .ex2, .ex3, .ex4, .ex5 { height: 150px; width: 150px; } p { color: rgb(255,0,0); }

 <button type="button" onclick="removeSamples()">Remove Samples</button> <button type="button" onclick="hideSamples()">Hide Samples</button> <button type="button" onclick="removeSamples2()">Bring back Samples</button> <button type="button" onclick="hideSamples2()">Show Samples</button> <div class="ex"> <img class="ex1" src="https://64.media.tumblr.com/af3438bac361d21ee1013338e4489b6f/b6f413ba8130992f-76/s1280x1920/0c9dab7eacac2a07eba7f340690514654d3e7aae.jpg"> </div> <div class="ex"> <img class="ex2" src="https://i.pinimg.com/736x/a7/8d/e7/a78de7602e65161098cf1713da457e7a.jpg"> </div> <div class="ex"> <img class="ex3" src="https://i.pinimg.com/originals/ec/83/3d/ec833d04025d2ca263df3b04bbc8723c.jpg"> </div> <div class="ex"> <img class="ex4" src="https://i.pinimg.com/originals/cc/b7/e9/ccb7e9b09ec4a48478b2ff9561010000.png"> </div> <div class="ex"> <img class="ex5" src="https://i.pinimg.com/originals/5b/cd/01/5bcd015992afa05979c8b9b448fb2939.jpg"> </div> <p>Text</p>

Answer 1

在這里，我將對上面的代碼和JavaScript 中for做一個簡單的解釋。

首先，您使用相同的 class 創建多個容器

 <div class="ex"> </div> <div class="ex"> </div> <div class="ex"> </div> <div class="ex"> </div>

然后，在那個容器里放一些東西，看看發生了什么

 <div class="ex"> <p> Text1 </p> </div> <div class="ex"> <p> Text2 </p> </div> <div class="ex"> <p> Text3 </p> </div> <div class="ex"> <p> Text4 </p> </div>

現在添加一些CSS

 body { background-color: rgb(25,25,25); } p { color: rgb(200,200,0); background-color: rgb(150,50,50); font-size: 20px; }

 <div class="ex"> <p> Text1 </p> </div> <div class="ex"> <p> Text2 </p> </div> <div class="ex"> <p> Text3 </p> </div> <div class="ex"> <p> Text4 </p> </div>

現在讓我們插入一些基本的 Js ( JavaScript ) 代碼
我們將x變量聲明為document.getElementsByClassName('ex')它將幫助我們編寫x.style.display而不是document.getElementsByClassName('ex').style.display因為我們將多次調用它。 我們暫時不undefined i變量。

 var x = document.getElementsByClassName('ex'); //To use it as a refrence var i;

 body { background-color: rgb(25,25,25); } p { color: rgb(200,200,0); background-color: rgb(150,50,50); font-size: 20px; }

 <div class="ex"> <p> Text1 </p> </div> <div class="ex"> <p> Text2 </p> </div> <div class="ex"> <p> Text3 </p> </div> <div class="ex"> <p> Text4 </p> </div>

讓我們在JavaScript中創建一個button ，然后在HTML removeEx()創建空的function

 var x = document.getElementsByClassName('ex'); //To use it as a refrence var i; function removeEx() { }

 body { background-color: rgb(25,25,25); } p { color: rgb(200,200,0); background-color: rgb(150,50,50); font-size: 20px; }

 <button type="button" onclick="removeEx()"> Remove Lines </button> <div class="ex"> <p> Text1 </p> </div> <div class="ex"> <p> Text2 </p> </div> <div class="ex"> <p> Text3 </p> </div> <div class="ex"> <p> Text4 </p> </div>

現在，讓我們關注JavaScript 。
在我們制作的空function中，放空for語句

function removeEx() {
    for()
}

現在讓我們告訴for語句i變量等於0

function removeEx() {
    for(i = 0;)
}

然后，我們將告訴for語句在到達 HTML 中的最后一個 class 元素時停止循環， HTML是添加< smaller than符號，以便它知道在哪里停止。 此外，我們必須通過將.length方法附加到變量x來告訴它停止對應於類的長度，即我們在HTML中擁有的 4 個類。
而不是寫：

function removeEx() {
    for(i = 0; i < document.getElementsByClassName('ex').length;)
}

我們會寫：

function removeEx() {
    for(i = 0; i < x.length;) //Remember, var x = document.getElementsByClassName('ex');
}

我們將使i變量不斷增加 1 直到它達到 4（我們的類的數量），然后它將通過向i變量添加++運算符來停止。
所以我們會寫這個

function removeEx() {
    for(i = 0; i < x.length; i++)
}

我們for語句現在適用於 go。
讓我們打開一個大括號

function removeEx() {
    for(i = 0; i < x.length; i++) {
    }
}

我們將引發一個事件，以使所有div與 class ex一起被刪除。 因此，我們將i變量附加到x變量以通過鍵入x[i]來觸發事件，然后我們可以放置我們想要的事件。 對於我們的例子，事件是我們想要將display語句更改為none 。
我們會寫這個

function removeEx() {
  for (i = 0; i < x.length; i++) {
    x[i].style.display = 'none'; //You can put any CSS statement after x[i].style for example x[i].style.color
  }
}

現在讓我們測試我們的代碼

 var x = document.getElementsByClassName('ex'); var i; function removeEx() { for (i = 0; i < x.length; i++) { x[i].style.display = 'none'; } }

 body { background-color: rgb(25,25,25); } p { color: rgb(200,200,0); background-color: rgb(150,50,50); font-size: 20px; }

 <button type="button" onclick="removeEx()"> Remove Lines </button> <div class="ex"> <p> Text1 </p> </div> <div class="ex"> <p> Text2 </p> </div> <div class="ex"> <p> Text3 </p> </div> <div class="ex"> <p> Text4 </p> </div>

最后，我們再添加 3 個button 。 一個恢復我們的線條，一個讓我們的線條半透明，一個讓我們的線條不透明。
第一個按鈕：

 <button type="button" onclick="removeEx()">Remove Lines</button>

第二個按鈕：

 <button type="button" onclick="removeEx2()">Get back Lines</button>

第三個按鈕：

 <button type="button" onclick="removeEx3()">50% Lines</button>

第四個按鈕：

 <button type="button" onclick="removeEx4()">Normal Lines</button>

最終結果：

 var x = document.getElementsByClassName('ex'); //To use it as a refrence var i; function removeEx() { for (i = 0; i < x.length; i++) { x[i].style.display = 'none'; } } function removeEx2() { for (i = 0; i < x.length; i++) { x[i].style.display = 'block'; } } function removeEx3() { for (i = 0; i < x.length; i++) { x[i].style.opacity = '50%'; } } function removeEx4() { for (i = 0; i < x.length; i++) { x[i].style.opacity = '100%'; } }

 body { background-color: rgb(25,25,25); } p { color: rgb(200,200,0); background-color: rgb(150,50,50); font-size: 20px; }

 <button type="button" onclick="removeEx()">Remove Lines</button> <button type="button" onclick="removeEx2()">Get back Lines</button> <button type="button" onclick="removeEx3()">50% Lines</button> <button type="button" onclick="removeEx4()">Normal Lines</button> <div class="ex"> <p> Text1 </p> </div> <div class="ex"> <p> Text2 </p> </div> <div class="ex"> <p> Text3 </p> </div> <div class="ex"> <p> Text4 </p> </div>

希望它會幫助某人。
- Liqui Kal

Answer 2

嗨 opacity 獲得介於 0 和 1 之間的值，但您使用的是 0% 和 100%：！！ 像這樣修復您的代碼：

let y = document.querySelectorAll('.ex')
let i;

function removeSamples() {
  for (i = 0; i < y.length; i++) {
    y[i].style.display = 'none';
    y[i].style.opacity = 0;
  }
}


function showSamples() {
  for (i = 0; i < y.length; i++) {
    y[i].style.display = 'block';
    y[i].style.opacity = 1;
  }
}