如何在单击其他元素时显示项目

Question

嘿，我是html和css的新手，但我付出了所有的努力，写了一个html和css。

.copyButton{
margin-left: 10px;
}
.randomStatusCopyAlert{
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
z-index: 2;
visibility: hidden;
height: 45px;
float: right;
bottom: 2px;
left: 4%;
}
.randomStatusCopyAlert:before{
content:"";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
z-index: 1;
transform: rotate(45deg);
top: 39%;
}

<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="block">
<div class="latestatus">
<p>Life is good when you have books</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p>Cats are better than dogs.</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Ferrets are better than rats</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
</div>
</div>

实际上，当<button class="copystatus btn">Copy</button>单击时，我需要<span class="randomStatusCopyAlert">Copied!</span>是可见的，并且相应的跨度应该对相应的按钮可见。如果您知道答案，请提前告知方法(javascript和CSS(并表示感谢。

Answer 1

您可以使用css如下

.className{
display:none;
}

通过Javascript或JQuery显示和隐藏该div。

https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

https://www.w3schools.com/css/css_display_visibility.asp

显示/隐藏'；div'；使用JavaScript

Answer 2

使用两个类.show和.hide来显示和隐藏数据，单击将类show添加到元素以显示隐藏数据。

.hide{
display:none;
} 
.show{
display:block ! important;    }

let copy_btn = document.querySelectorAll('.copystatus.btn');
let copy_alert = document.querySelectorAll('.randomStatusCopyAlert');
copy_btn.forEach(function(copy_btn_current, index) {
copy_btn_current.addEventListener('click', function() {
copy_alert[index].classList.add('show');
});
});

.copyButton {
margin-left: 10px;
}
.hide{
display:none;
}
.show{
display:block ! important;
}
.randomStatusCopyAlert {
display: none;
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
z-index: 2;
height: 45px;
float: right;
bottom: 2px;
left: 4%;
}
.randomStatusCopyAlert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
z-index: 1;
transform: rotate(45deg);
top: 39%;
}

<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="block">
<div class="latestatus">
<p>Life is good when you have books</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p>Cats are better than dogs.</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Ferrets are better than rats</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
</div>
</div>

Answer 3

我只是用forEach()方法向Javascript显示消息的一个例子。

此外，我在选择器.randomStatusCopyAlert处用css中的display: none替换了visibility: hidden。

let copy_btn = document.querySelectorAll('.copystatus.btn');
let copy_alert = document.querySelectorAll('.randomStatusCopyAlert');
copy_btn.forEach(function(copy_btn_current, index) {
copy_btn_current.addEventListener('click', function() {
copy_alert[index].style.display = 'block';
});
});

.copyButton {
margin-left: 10px;
}
.randomStatusCopyAlert {
display: none;
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
z-index: 2;
height: 45px;
float: right;
bottom: 2px;
left: 4%;
}
.randomStatusCopyAlert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
z-index: 1;
transform: rotate(45deg);
top: 39%;
}

<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="block">
<div class="latestatus">
<p>Life is good when you have books</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p>Cats are better than dogs.</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Ferrets are better than rats</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
</div>
</div>

第二个没有javascript的解决方案，使用伪类:target。

.copyButton {
margin-left: 10px;
}
.randomStatusCopyAlert:target {
display: block;
}
.randomStatusCopyAlert {
display: none;
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
z-index: 2;
height: 45px;
float: right;
bottom: 2px;
left: 4%;
}
.randomStatusCopyAlert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
z-index: 1;
transform: rotate(45deg);
top: 39%;
}

<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="block">
<div class="latestatus">
<p>Life is good when you have books</p>
<div class="flex"><a href="#alert1" class="copystatus btn"><button>Copy</button></a><span id="alert1" class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<div class="flex"><a href="#alert2" class="copystatus btn"><button>Copy</button></a> <span id="alert2" class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p>Cats are better than dogs.</p>
<div class="flex"><a href="#alert3" class="copystatus btn"><button>Copy</button></a><span id="alert3" class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Ferrets are better than rats</p>
<div class="flex"><a href="#alert4" class="copystatus btn"><button>Copy</button></a><span id="alert4" class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
</div>
</div>

Answer 4

这是JS方法。使用for循环加载类，并将span的可见性从"隐藏"更改为visible。

let button = document.getElementsByClassName('copystatus btn');
let spaned = document.getElementsByClassName('randomStatusCopyAlert');
for (let i = 0 ; i < button.length; i++) {
button[i].addEventListener('click', function() {
spaned[i].style.visibility = 'visible';

})
}

.copyButton{
margin-left: 10px;
}
.randomStatusCopyAlert{
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
z-index: 2;
visibility: hidden;
height: 45px;
float: right;
bottom: 2px;
left: 4%;
}
.randomStatusCopyAlert:before{
content:"";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
z-index: 1;
transform: rotate(45deg);
top: 39%;
}

<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="block">
<div class="latestatus">
<p>Life is good when you have books</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p>Cats are better than dogs.</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Ferrets are better than rats</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
</div>
</div>