任何人都可以帮助 jquery 中的功能吗？

Posted 2023-03-06

【中文标题】任何人都可以帮助 jquery 中的功能吗？

【英文标题】：Can anyone help the functionality in jquery?

【发布时间】：2020-12-01 10:38:35

【问题描述】：

when selected the button the two siblings of select button should be disabled and after clicking 1st it should be displayed continue button respectively

【问题讨论】：

插入您的代码

jsfiddle.net/bprakash23/zf2ambLw/5 你能在这里检查吗@sergey kuznetsov

您希望您的“继续 6 个月计划”按钮在单击较高的“选择”按钮后变为活动状态？

是的，如果我选择任何选择按钮，则继续按钮应显示在底部，而其他两个选择按钮应淡出，即使我选择第二个和第三个，它也将具有相同的功能，如果我选择继续文本按钮应该是一个是 3 个月，另一个是 1 个月来填充。

@sergey kuznetsov 我已经在描述中给出了图片，请检查并做必要的事情。非常感谢提前！

【参考方案1】：

这样的结果有必要吗？

$(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>