根据之前的选择修改html内容显示

Question

我正在尝试重用这段适用于我的网站的代码，事实是，根据用户的选择，我需要下一步是一个或另一个。 在提供的示例中，用户可以选择：“创建网站”、“网站重新启动”和“不知道”，因此我希望下一步的内容有所不同，具体取决于用户的选择。

换句话说，如果我选择“创建网站”，我希望在下一步中获得 A、B 和 C 输入/字段（姓名、电子邮件、电话，等等）。 但是，如果我选择网站重新启动或不知道，我想获得 X、Y、Z 输入/字段。

我对 jQuery 有点迷茫。 有人可以帮我吗？

演示代码在这里

Answer 1

您可以将所有可能的字段放在 HTML 中，但在 init 中隐藏它们。 假设您使用.form-group包装器，它可能如下所示：

$(document).ready(function() {
    $('.form-group').css('display', 'none');
})

然后定义 3 个函数，您可以将它们作为 onclick 添加到第一张幻灯片上的三个选项中。 类似于<div class="row justify-content-center d-flex" onclick="defineCreateFormFields()"> 。

函数必须做这样的事情：

function defineCreateFormFields() {
    $('.form-group').css('display', 'none'); // make sure you reset all fields back to display: none initially
    $('#email').parent('.form-group').css('display', 'block');
    $('#xyz').parent('.form-group').css('display', 'block');
    ...
}

我看到还有表单验证功能。 记住也要根据您的需要调整它们。

快乐编码！

Answer 2

您的问题实际上太宽泛和/或基于选项。 但是想想简单的步骤，会发生什么：在您单击之前，所有表单字段都隐藏了状态。 (pressumingly display:none; ) 表单域被包裹在<div class="card-body pt-0">...</div>容器中。 有几个。 单击鼠标后，javascript 正在运行，让一个出现。

我的建议是：

复制字段块并用您自己的字段填充它们。 确保它们具有相同的外观。 向包含字段的所有容器添加一个“唯一”虚拟 css 类。这些 css 类的给定名称应包含修复和动态部分。 示例： "showFormFields_1" 、 "showFormFields_2"等等。

链接的 javascript可能是：

//At first: hide all divs
$("div .card-body .pt-0").hide(); 
//then make only div block visible with a particular css class 
$("div .card-body .pt-0 .showFormfields_" + selectionValue).show();