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>

但显而易见的问题是，它使每个div的.box-content为红色，我只想让它在同一个父级中的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/

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

4 个答案: