在另一个div上单击时将活动类添加到第一个div

Question

我正在尝试编辑切换按钮我有这样的功能，当您单击一个链接时，div会打开并在其上有一个.active类。唯一的问题是，有多个同一类的div。

例如，我的代码是：

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

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

 
.justify-text { 
 
\t position: relative; 
 
} 
 

 
.active { 
 
\t 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的内容红色，我只是希望它使每一个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> 

Answer 2

使用closest另一种方法和next。

$(".btn-minimize").click(function() {  
     $(this).closest('.box-header').next('.box-content').addClass('active'); 
    }); 

http://jsfiddle.net/8L2h80k0/1/

Answer 3

当选择与类选择多个元素，并结合事件，对他们你要引用触发事件的元素，并从那里对儿童元素进行操作。

在jQuery中，在您的示例中，事件对象被传递到您分配的处理函数中。您可以在处理程序中使用此对象或$ this来执行这些操作。

<script type="text/javascript"> 
$(function() { 
    $(".btn-minimize").click(function(e) { 
     // The e parameter in this case contains the event information including the currentTarget and anything specific to the event itself such as keyCode if you were working with key events 

     // Cache the selection 
     var content = $(e.currentTarget).closest(".box-content"); 

     // Toggle the class 
     content.toggleClass('active'); 

     // You can also select using $(this) which is common practice because the the keyword this is assigned the currentTarget within the scope of the event handler 
     $(this).closest(".box-content").toggleClass('active'); 

    }); 
}); 
</script> 

这里是click事件和事件对象本身的文档：

点击：https://api.jquery.com/click/ 事件对象：http://api.jquery.com/Types/#Event

好运

Answer 4

如果.box-content等于.btn-minimize号他们的索引可以用来代替查找或最接近的。

$(".btn-minimize").each(function(i) { 
    $(this).click(function(){ 
     $(".box-content").removeClass('active'); 
     $(".box-content").eq(i).addClass('active'); 
    }); 

}）;

http://jsfiddle.net/8L2h80k0/3/