Jquery将类添加到不同按钮上的div

Question

我有一个按钮组，想根据按钮点击显示不同的 div。

如果我点击 purchase 按钮，如果我点击 I拥有许可证，它应该使用 isactive 类激活 license div，并隐藏 cadpaymentform div。

<div class="pricing5 py-5">
<div class="btn-group rounded-pill" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-md rounded-left active">
                            <input type="radio" name="options" id="option1" checked=""> <b>Purchase</b>
                        </label>
            <label class="btn btn-outline-secondary rounded-right btn-md">
                            <input type="radio" name="options" id="option2"> <b>I have a license</b>
                        </label>
          </div>
<div class="cadpaymentform isactive">
    form
</div>
<div class="license">
    license
</div>
          </div>

到目前为止，我已经尝试过这段代码，但不起作用

$(".pricing5 .btn-group .btn").click(function () {
            $(this).closest('.pricing5').find('.cadpaymentform').removeClass('isactive');
            $(this).closest('.pricing5').find('.license').addClass('isactive');
        });

Answer 1

使用此代码。

/*$(".pricing5 .btn-group .btn").click(function () {
            $(this).closest('.pricing5').find('.cadpaymentform').removeClass('isactive');
            $(this).closest('.pricing5').find('.license').addClass('isactive');
        });*/

$('.pricing5 .btn-group .btn input[name="options"]').on('change', function(e) {
   var className = e.target.value;
   $(this).closest('.pricing5').find('.view').removeClass('isactive');
   $(this).closest('.pricing5').find('.view.' + className).addClass('isactive');
});

.cadpaymentform, .license {
 display: none;
}

.isactive {
 display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing5 py-5">
<div class="btn-group rounded-pill" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-md rounded-left active">
                            <input type="radio" name="options" id="option1" value="cadpaymentform" checked=""> <b>Purchase</b>
                        </label>
            <label class="btn btn-outline-secondary rounded-right btn-md">
                            <input type="radio" name="options" id="option2" value="license"> <b>I have a license</b>
                        </label>
          </div>
<div class="view cadpaymentform isactive">
    form
</div>
<div class="view license">
    license
</div>
          </div>