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

问题描述

嘿，我是 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>

实际上，我需要在点击 <span class="randomStatuscopyAlert">copied!</span> 时使 <button class="copystatus btn">copy</button> 可见，并且相应的跨度应该对相应的按钮可见。 如果您知道答案，请告知方法（javascript 和 CSS）并提前致谢。

解决方法

你可以使用下面的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

Show/hide 'div' using JavaScript

,

我为您提供了一个使用 forEach() 方法向 Javascript 显示消息的示例。

此外，我在 CSS 中的选择器 visibility: hidden 处将 display: none 替换为 .randomStatusCopyAlert。

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>

,

使用两个类 .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,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>

,

这是 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>