Question

我有这个模板，根据单击哪个无线电输入，表单会发生变化。默认情况下会检查教师注册表单。

<!-- when user clicks either teacher or student a different partial will render in view
    each partial is wrapped in its own form element -->
<div class="container">
    <div class="d-flex flex-row mt-5 mb-5">
            <h2 style="font-family: 'champagne-limo';" class="">General Information:</h2>
    </div> <!--teacher-student checkboxes -->
    <div class="row">
        <div class="col-4">
            <h5>You are:</h5>
        </div>
        <div class="col-2">
            <input checked name="teacher-student" type="radio" id="teacher-signup">
            <label for="teacher-signup">Teacher</label>
        </div>
        <div class="col-2">
            <input type="radio" name="teacher-student" id="student-signup">
            <label for="student-signup">Student</label>
        </div>
    </div>
</div>

<!--this partial would have the id of 'teacher-signup-form' -->
<%-include("./partials/teacher-signup.ejs")%>

<!--this partial would have the id of 'student-signup-form' -->
<%-include("./partials/student-signup.ejs")%>

在我的jQuery中，我创建了一个应该切换表单的简单函数

$('#student-signup-form').hide();

  $('#input[name="teacher-student"]:radio').on('change', function(){

    $('#teacher-signup-form').hide();
    $('#student-signup-form').show();
  })

});

不幸的是，这不起作用，并显示两种形式几秒钟，然后隐藏学生注册表格。

有更清洁有效的方法吗？我的jQuery似乎不是最好的解决方案。

Answer 1

基于静态CSS设置初始状态。否则，当页面加载时，您将看到两者。

所以在学生部分设置样式显示：none。

然后你的JS就会变成

$('#input[name="teacher-student"]:radio').on('change', function(){
  $('#teacher-signup-form').toggle();
  $('#student-signup-form').toggle();
  })
});

Answer 2

我会建议一些改变。首先要在页面加载时隐藏学生注册表单，您可以添加css来执行此操作。

#student-signup-form { display: none; }

然后，为了允许来自学生和老师的来回切换，我建议你除了他们的ID之外，还给每个表格一个signup-form类。然后您的单选按钮可以更改为以下内容。

<input type="radio" name="teacher-student" class="signup-radio" id="teacher-signup" data-target="#teacher-signup-form" checked>
<input type="radio" name="teacher-student" class="signup-radio" id="student-signup" data-target="#student-signup-form">

然后，您可以概括表单类的更改处理程序和无线电上的数据元素。

//cache the forms lookup
var $signupForms = $('.signup-form');
$('.signup-radio').on('change', function(e){
    var $this = $(e.target);

    //hide the forms that do not match the target selector
    $signupForms.not($this.data('target')).hide();
    //show the form that matches the target selector
    $signupForms.filter($this.data('target')).show();
});

使用无线电输入切换部分表格

2 个答案: