javascript - 显示/隐藏独特的 Div

Question

我有 3 个主要 div(格式完全相同)。我想要做的是让“ratingclick”按钮在其各自的 div 下方显示 DIV 框。

例如评级按钮 1 打开其下方的唯一 Div。

HTML:

  <div class="feature">1 
  <div class="ratingclick"><a onclick="RatingsBox()">Ratings</a></div>
 <div class="ratingsboxDIV"> This is Div 1 </div></div>
 ----------  
 <div class="feature">2 
  <div class="ratingclick"><a onclick="RatingsBox()">Ratings</a></div>
<div class="ratingsboxDIV"> This is Div 2 </div></div>
  ---------
<div class="feature">3
<div class="ratingclick"><a onclick="RatingsBox()">Ratings</a></div>
    <div class="ratingsboxDIV"> This is Div 3 </div></div>

Javascript:

function RatingsBox() {
var x = document.getElementById("ratingsboxDIV");
x.style.display === "none";

 if (x.style.display === "block") {
       x.style.display = "none";
   } else {
      x.style.display = "block";
    }
}

#ratingsboxDIV {
display:none;
min-height:300px;
background-color:white;
padding: 10px;
width: 80%;
margin: auto;
margin-top: 0px;
max-width: 800px;
 }

Answer 1

一种方法可能是提供点击event进入RatingsBox功能，以便您可以区分用户单击的按钮，然后切换相应 .ratingsboxDIV 的可见性元素:

function RatingsBox(event) {
   
var ratingsBox = event.currentTarget // Get the current button
.parentNode                          // Get parent of button
.parentNode                          // Get grandparent of button
.querySelector('.ratingsboxDIV');    // Get the ratings box
  
// Toggle visibility of the div via inline styles
if (ratingsBox.style.display !== "none") {
    ratingsBox.style.display = "none";
} else {
    ratingsBox.style.display = "block";
}
}

#ratingsboxDIV {
display:none;
min-height:300px;
background-color:white;
padding: 10px;
width: 80%;
margin: auto;
margin-top: 0px;
max-width: 800px;
 }

<div class="feature">1 
  <!-- Pass event to RatingsBox -->
  <div class="ratingclick"><a onclick="RatingsBox(event)">Ratings</a></div>
  <div class="ratingsboxDIV"> This is Div 1 </div>
</div>
----------  
<div class="feature">2 
  <!-- Pass event to RatingsBox -->
  <div class="ratingclick"><a onclick="RatingsBox(event)">Ratings</a></div>
  <div class="ratingsboxDIV"> This is Div 2 </div>
</div>
---------
<div class="feature">3
  <!-- Pass event to RatingsBox -->
  <div class="ratingclick"><a onclick="RatingsBox(event)">Ratings</a></div>
  <div class="ratingsboxDIV"> This is Div 3 </div>
</div>