アクティブなブロックを非表示にするにはどうすればいいですか？

Question

仲間には、次のコードがあります。私がテーブルをクリックすると、ハイライトされ、別のものをクリックすると、前のものが点灯したままになり、次のものが押されたままになります。別のテーブルをクリックすると、前のテーブルがハイライト表示されないように、どうすれば編集できますか？

$('.pricing-customer').on('click', function(){ 
 
    $(this).toggleClass('active'); 
 
    $(this).children().toggleClass('active'); 
 
});

.pricing-customer { 
 
    background: #fff; 
 
    min-height: 250px; 
 
    cursor: pointer; 
 
    transition: all .3s ease-in-out; 
 
    margin-bottom: 20px; 
 
    padding: 10px 0px 25px 0px; 
 
} 
 
p.pricing-number { 
 
    font-size: 52px; 
 
    margin-bottom: 10px; 
 
    margin-top: 20px; 
 
    color: #fead0d; 
 
} 
 
p.pricing-monthes { 
 
    color: #5e6977; 
 
    font-size: 14px; 
 
    line-height: 21px; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid #e1e8ee; 
 
} 
 
p.emails { 
 
    color: #444; 
 
    font-size: 16px; 
 
    line-height: 21px; 
 
} 
 
.pricing-customer:hover, .pricing-customer.active { 
 

 
background-color: #333; 
 
} 
 
.pricing-customer:hover p , .pricing-customer p.active{ 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div> 
 

 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div> 
 

 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div>

Answer 1

代わりに子供の使用siblings。私はこれがあなたの探しているものだと願っています。

$('.pricing-customer').on('click', function(){ 
 
    $(this).toggleClass('active'); 
 
    $(this).siblings().removeClass('active'); 
 
});

.pricing-customer { 
 
    background: #fff; 
 
    min-height: 250px; 
 
    cursor: pointer; 
 
    transition: all .3s ease-in-out; 
 
    margin-bottom: 20px; 
 
    padding: 10px 0px 25px 0px; 
 
} 
 
p.pricing-number { 
 
    font-size: 52px; 
 
    margin-bottom: 10px; 
 
    margin-top: 20px; 
 
    color: #fead0d; 
 
} 
 
p.pricing-monthes { 
 
    color: #5e6977; 
 
    font-size: 14px; 
 
    line-height: 21px; 
 
    padding-bottom: 20px; 
 
    border-bottom: 1px solid #e1e8ee; 
 
} 
 
p.emails { 
 
    color: #444; 
 
    font-size: 16px; 
 
    line-height: 21px; 
 
} 
 
.pricing-customer:hover, .pricing-customer.active { 
 

 
background-color: #333; 
 
} 
 
.pricing-customer:hover p , .pricing-customer.active p{ 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div> 
 

 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div> 
 

 
<div class="pricing-customer col-sm-12 col-sm-3 text-center"> 
 
    <h3><?php echo $t_title; ?></h3> 
 
    <p class="pricing-number">$ 70</p> 
 
    <br> 
 
    <p class="pricing-monthes">per week/month</p> 
 
    <p class="pricing-emails">100 000 emails</p> 
 
</div>