javascript - 单击另一个 div 时将事件类添加到第一个 div

Question

我正在尝试编辑我拥有的切换按钮，因此当您单击链接时，div 将打开并在其上有一个 .active 类。唯一的问题是有多个具有相同类的 div。

比如我的代码是:

<script type="text/javascript">
    $(function() {
        $(".btn-minimize").click(function() {
            $(".box-content").addClass('active');
        });
    });
</script>

.box {
	width: 33.3%;
	height: 200px;
	border-radius: 0;
	padding: 30px;
}

.justify-text {
	position: relative;
}

.active {
	background: red !important;
}

<div class="x-text justify-text "><div class="box">
<div class="box-header">
<div class="box-header-text">What are marginal fields?</div>
<div class="box-icon"><a href="#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a></div>
</div>
<div class="box-content">
Marginal fields can be broadly defined as oil and gas resources which are considered to be uneconomic to develop; this could be for a variety of reasons including reserve size, complexity, distance from nearby infrastructure, production costs or the current and future fiscal and market conditions. A combination of any or all of these factors often results in a field becoming sub-economic to produce using conventional solutions causing operators to ignore these valuable resources.Marginal fields also include low volume producing fields which are near the end of their economic life using the current production solution, as revenues fall below operating expenditure. The early cessation of production from fields which still contain significant resources is a further threat to maximising recovery and, in addition, unnecessarily brings forward the costs of decommissioning.<p></p>
</div>
</div>
<div class="box">
<div class="box-header">
<div class="box-header-text">Why marginal fields are crucial to maximising economic recovery</div>
<div class="box-icon"><a href="#" class="btn-minimize"><i class="fa fa-chevron-down"></i></a></div>
</div>
<div class="box-content" style="display:none;">
Cost escalation of almost 20% per annum over the last decade and the subsequent fall in oil prices have increased the minimum economic field size, meaning that even greater numbers of fields are now considered to be sub-economic or ‘marginal’ using conventional development methods.<p></p>
<p>With over 1.7 billion boe locked in hydrocarbon fields containing less than 30 million boe in the UKCS alone and with the average size of discovery is now below 25 million boe and continuing to decline, it is imperative that a solution is found to economically develop these resources.</p>
</div>
</div>
<div class="box">
<div class="box-header">
<div class="box-header-text">A New Approach</div>
<div class="box-icon"><a href="#" class="btn-minimize"><i class="fa fa-chevron-down"></i></a></div>
</div>
<div class="box-content" style="display:none;">
<p>Since its birth in the 1960’s, the UK oil and gas industry has evolved to deliver particular types of projects using a certain type of approach, namely supermajors developing huge oil and gas discoveries using conventional production solutions designed and fabricated specifically for that field. Although the sector has advanced and evolved as it has grown, particularly from fixed platforms to floating production systems, it is still geared up to deliver projects on these terms.</p>
<p>The traditional business model and working practices of large operators and engineering firms, which have led to uncontrolled cost escalation in the UKCS, cannot deliver smaller projects such as marginal fields, where costs are critical. Marginal fields demand not only cost-effective production solutions but a new approach throughout the entire lifecycle including finance, field development, EPC, project management, operation and decommissioning. The Consortium is leading the way, collaborating with specialists who together can deliver marginal field projects. As the number of marginal fields has increased in the UKCS, so to the population of operators has changed; smaller independent exploration and production (E&amp;P) companies are attracted to the fields that do not fit into the portfolio of the supermajors but still have the potential to generate significant returns. These marginal field projects require expertise across a broad spectrum of disciplines as well as the dedication to cost efficiency. The Consortium believes this is best achieved by flexible, nimble specialists who embrace innovation, reduce duplication of effort and adapt, appropriately, to the demands of each project.</p>
<p>Careful, coordinated project and risk management will ensure that cost escalation during project definition and execution is avoided. By doing so, the Consortium addresses the drivers of cost escalation to unlock marginal field opportunities and deliver the greatest returns.</p>
<p>The Consortium offers the expertise, experience and capability to deliver marginal fields, from project identification through operation to decommissioning, aligned with a single vision and common guiding principles. Key drivers are to ensure projects are delivered on schedule and within budget whilst optimising value through the production profile and recovery efficiency.</p>
</div>
</div>
</div>

但这样做的明显问题是它使每个带有 .box-content 的 div 都变成红色，而我只是希望它使同一父级中的 div 变红。

提前致谢。

Answer 1

你需要使用 $(this) , .closest() 和 .find()

<script type="text/javascript">
    $(function() {
        $(".btn-minimize").click(function() {
            $(".box-content").removeClass('active');
            $(this).closest('.box').find(".box-content").addClass('active');
        });
    });
</script>

但对我来说最好是这样(如果你需要 toggleClass())

<script type="text/javascript">
    $(function() {
        $(".btn-minimize").click(function() {
            var elem_we_Need = $(this).closest('.box').find(".box-content");
            $(".box-content").not(elem_we_Need).removeClass('active');
            elem_we_Need.toggleClass('active');
        });
    });
</script>