如何解决谁能帮助jquery中的功能?
选择按钮时,应禁用选择按钮的两个同级,单击1st后应分别显示继续按钮
解决方法
这样的结果是否必要?
$(document).ready(function() {
$('.btn-select').on('click',function(){
$('.btn-continue').css('display','none');
$('.btn-select').prop('disabled',true);
$(this).parents('.monthly_plan').find('.btn-continue').css('display','block');
$(this).prop('disabled',false);
});
$('.btn-continue').on('click',function(){
$('.btn-select').prop('disabled',false);
$(this).css('display','none');
});
});
.card.first_mnth-details{
padding: 1rem;
border-top: 10px solid #E3D6B4;
box-shadow: 0 3px 6px #00000029;
text-align: center;
}
.card.first_mnth-details .price{
margin: 0;
font-weight: 700;
}
.monthly_plan{
padding: 10px 0;
}
.container{
padding:40px 0;
}
.btn-continue{
text-align:center;
display:none;
background: #e78471;
}
.active{
display:block;
}
.btn-select{
background: #fffbf0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="monthly_plan">
<div class="card first_mnth-details">
<p class="price">₹999 per month</p>
<p>Order Now & Save 63%</p>
<p class="home-del">*Home delivered and billed monthly for the next 6 months</p>
<button class="btn btn-select"> Select</button>
</div>
<div class="pt-4">
<button class="btn btn-continue btn-block">Continue with 6 months plan
</button>
</div>
</div>
<div class="monthly_plan">
<div class="card first_mnth-details">
<p class="price">₹1499 per month</p>
<p>Order Now & Save 44%</p>
<p class="home-del">*Home delivered and billed monthly for the next 3 months</p>
<button class="btn btn-select"> Select</button>
</div>
<div class="pt-4">
<button class="btn btn-continue btn-block">Continue with 6 months plan
</button>
</div>
</div>
<div class="monthly_plan">
<div class="card first_mnth-details">
<p class="price">₹1699 per month</p>
<p>Save 37% On Trial Plan</p>
<p class="home-del">*Home delivered and billed monthly for the next 1 months</p>
<button class="btn btn-select"> Select</button>
</div>
<div class="pt-4">
<button class="btn btn-continue btn-block">Continue with 6 months plan
</button>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。