我有3个方框，每个方框都有一个“单击以获取更多信息”按钮。我想编写尽可能少的JS，因为我不确定我将有多少个潜在的框，因此不想为每个框编写单独的函数。
当我单击第一个框上的按钮时，它将显示第一个框的更多信息。当我单击第二个框上的按钮时，它在第一个框上显示更多信息...
我试图找到一种选择“兄弟”按钮的解决方案。
$("button").click(function() {
var x = document.getElementById("moreInfo");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
};
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="prices">
<div class="row">
<h2 class="prices-wp">Our Packages</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="price-box js--wp-3">
<div>
<h3>Lake District</h3>
<p class="price">£350+ <span>BEST OFFER</span></p>
<p class="price-description">Perfect for those who know what they want</p>
<button>Click for more</button>
</div>
<div id="moreInfo">
<ul>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><a href="contactus.php" class="btn-full price-btn-full">Yes please!</a></li>
</ul>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="price-box">
<div>
<h3>Wales</h3>
<p class="price">£250+ <span>Discounts available via Facebook</span></p>
<p class="price-description">Great for people who love sheep</p>
<button>Click for more</button>
</div>
<div id="moreInfo">
<ul>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><a href="contactus.php" class="btn-ghost price-btn-ghost">Book now</a></li>
</ul>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="price-box">
<div>
<h3>D of E</h3>
<p class="price">£150+<span></span></p>
<p class="price-description">Perfect cadets</p>
<button>Click for more</button>
</div>
<div id="moreInfo">
<ul>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><a href="contactus.php" class="btn-ghost price-btn-ghost">Book now</a></li>
</ul>
</div>
</div>
</div>
<div class="row more-info">
<p>For more information on each package, click <a href="#" class="packageInfo" target="_blank">here</a>.<br><br>(This could contain a document with more in-depth prices)</p>
</div>
</div>
</section>
我希望按钮仅显示相关框的额外信息。
答案 0 :(得分：1)
属性 id 在文档中必须是唯一的，请改用 class 。您可以通过parent()和next()定位特定元素，然后切换 class ：
$("button").click(function() {
var x = $(this).parent().next();
x.toggleClass('moreInfo');
});.moreInfo{
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="prices">
<div class="row">
<h2 class="prices-wp">Our Packages</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="price-box js--wp-3">
<div>
<h3>Lake District</h3>
<p class="price">£350+ <span>BEST OFFER</span></p>
<p class="price-description">Perfect for those who know what they want</p>
<button>Click for more</button>
</div>
<div class="moreInfo">
<ul>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><a href="contactus.php" class="btn-full price-btn-full">Yes please!</a></li>
</ul>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="price-box">
<div>
<h3>Wales</h3>
<p class="price">£250+ <span>Discounts available via Facebook</span></p>
<p class="price-description">Great for people who love sheep</p>
<button>Click for more</button>
</div>
<div class="moreInfo">
<ul>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><a href="contactus.php" class="btn-ghost price-btn-ghost">Book now</a></li>
</ul>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="price-box">
<div>
<h3>D of E</h3>
<p class="price">£150+<span></span></p>
<p class="price-description">Perfect cadets</p>
<button>Click for more</button>
</div>
<div class="moreInfo">
<ul>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><i class="far fa-dot-circle icon-small"></i>We do this</li>
<li><a href="contactus.php" class="btn-ghost price-btn-ghost">Book now</a></li>
</ul>
</div>
</div>
</div>
<div class="row more-info">
<p>For more information on each package, click <a href="#" class="packageInfo" target="_blank">here</a>.<br><br>(This could contain a document with more in-depth prices)</p>
</div>
</div>
</section>
答案 1 :(得分：0)
this.parentNode.nextSibling获取moreInfo类div元素。