在另一個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/