单击按钮时删除/隐藏多个div

我正要提出一个问题，但我实际上注意到了我的错误并解决了它。因此，我不会删除这篇文章，而是发布它以帮助那里的一些人。
[错误是我写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>

嗨不透明度获取 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;
}
}

在这里，我将对上面的代码进行简要解释，并对JavaScript中的for进行简要解释。

首先，您创建具有相同类的多个容器

<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，因为我们将多次调用它。我们将暂时保留i变量undefined。

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>

让我们在HTML中做一个button，然后在JavaScript中做空function，称为removeEx()

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中的最后一个类元素后停止循环，方法是添加<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声明现在可以开始了。
让我们打开一个大括号

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

我们将唤起一个事件，使所有div与类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>

相关内容

最新更新

热门标签：