jquery - 如何在单击单选按钮时隐藏和显示段落

Question

我正在尝试隐藏和显示有关单击单选按钮的段落。我还希望第一个单选按钮在用户登陆页面时处于事件状态。

这是我的 HTML:

<div class="BusinessForm">
  <p class="showBusinessForm" style="display:none">Business</p>
</div>
<div class="TechnicalForm">
  <p class="showTechnicalForm" style="display:none">Technical</p>
</div>
<div class="LoginForm">
  <p class="showLoginForm" style="display:none">login</p>
</div>

这是我的 JS 代码:

$(document).ready(function() {
    $(".showBusinessForm").show();
});
$(".showBusinessForm").click(function(){
    $(".showTechnicalForm").hide();
    $(".showLoginForm").hide();
    $(".showBusinessForm").show();
});
$(".showTechnicalForm").click(function(){
    $(".showTechnicalForm").show();
    $(".showLoginForm").hide();
    $(".showBusinessForm").hide();
});
$(".showLoginForm").click(function(){
    $(".showTechnicalForm").hide();
    $(".showLoginForm").show();
    $(".showBusinessForm").hide();
});

Answer 1

我建议您采用动态方法，而不是针对每个 div 进行特定。

您可以使用表单的值和类来选择您的目标表单以与您的单选按钮一起显示。

$(".radiobtn").click(function(){
  $(".form").hide();
  $("."+$(this).val()).show();
})

.form{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Business <input type="radio" class="radiobtn" value="BusinessForm" name="showForm"/>
Technical <input type="radio" class="radiobtn" value="TechnicalForm" name="showForm"/>
Login <input type="radio" class="radiobtn" value="LoginForm" name="showForm"/>

<div class="form BusinessForm">
  <p>Business</p>
</div>
<div class="form TechnicalForm">
  <p>Technical</p>
</div>
<div class="form LoginForm">
  <p>login</p>
</div>