Javascript 在脚本开始时，所有三个元素都可见。是否可以仅显示所选选项的元素

在这段html代码中，有3个选项应该用脚本来处理。问题是，当页面加载时，所有项目都将默认显示，因此在脚本开始时可见。 是否有一种方法可以隐藏它们并仅在脚本执行后显示它们

$（文档）.ready（函数（）{
$（“.ios13分段控件”）.on（“更改”，函数（）{
$（“.ios13分段控件.选项输入”）。每个（函数（i）{
if（$（this.is（“：checked”））$（“.ios13分段控件.selection”）.css(
“transform”、“translateX（“+（$（this）.outerWidth（）*i）+“px”）；
});
});
});
功能检查值（字段值）{
开关（字段值）{
案例1：
document.getElementByClassName（“选项”）.innerHTML=“Khar”；
打破
案例2：
document.getElementByClassName（“选项”）.innerHTML=“Santacruz”；
打破
案例3：
document.getElementByClassName（“选项”）.innerHTML=“Andheri”；
打破
}
}

body，
html{
身高：100%；
保证金：0；
填充：0；
文本呈现：几何精度；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
字体系列：-苹果系统，系统用户界面，MacSystemFont，“Segoe用户界面”，Roboto，“Helvetica Neue”，Arial，无衬线字体；
-webkit溢出滚动：触摸！重要；
触摸动作：操控！重要；
-webkit点击高亮显示颜色：rgba（0,0,0,0）
}
身体{
显示器：flex
}
* {
框大小：边框框
}
主体{
边缘顶部：20px；
左边距：自动；
右边距：自动
}
标签{
游标：继承
}
.13分段控制{
--背景：rgba（239239240,1）；
背景：var（--背景）；
边界半径：9px；
保证金：0；
填充：2.3px；
边界：无；
大纲：无；
显示：网格；
网格自动流：列；
网格自动列：1fr；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无
}
.ios13分段控件。选项{
位置：相对位置；
光标：指针
}
.ios13分段控件。选项：悬停输入：未（：选中）+标签范围，
.ios13分段控件。选项：活动输入：未（：选中）+标签范围，
.ios13分段控件。选项：焦点输入：未（：选中）+标签范围{
不透明度：.2
}
.ios13分段控件。选项：活动输入：未（：选中）+标签范围{
变换：比例（.95）
}
.ios13分段控件.选项标签{
位置：相对位置；
显示：块；
文本对齐：居中；
填充：3px6vmin；
背景：rgba（255，255，255，0）；
字号：500；
颜色：rgba（0,0,0,1）；
字号：14px
}
.ios13分段控件。选项标签：：之前，
.ios13分段控件。选项标签：：after{
内容：''；
宽度：1px；
背景：rgba（14214214715）；
位置：绝对位置；
最高：14%；
底部：14%；
边界半径：10px；
会变：背景；
-webkit过渡：背景。2轻松；
过渡：背景。2秒轻松
}
.ios13分段控件。选项标签：：之前{
左：0；
转换：translateX（-.5px）
}
.ios13分段控件。选项标签：：after{
右：0；
转换：translateX（.5px）
}
.ios13分段控件。选项：类型的第一个{
网格柱：1；
网格行：1；
盒影：无
}
.ios13分段控件。选项：类型label:：before的第一个{
不透明度：0
}
.ios13分段控件。选项：label:：after类型的最后一个{
不透明度：0
}
.ios13分段控件。选项输入{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
填充：0；
保证金：0；
-webkit外观：无；
-moz外观：无；
外观：无；
大纲：无；
边界：无；
不透明度：0
}
.ios13分段控制。选择{
背景：rgba（255，255，255，1）；
边框：.5px实心rgba（0,0,0,0.04）；
盒影：0 3px 8px 0 rgba（0,0,0,0.12），0 3px 1px 0 rgba（0,0,0,0.04）；
边界半径：7px；
网格柱：1；
网格行：1；
z指数：2；
改变：转变；
-webkit转换：转换.2s易用性；
转换：转换。2秒轻松
}
.ios13分段控件。选项标签范围{
显示：块；
位置：相对位置；
z指数：2；
-webkit过渡：所有.2s轻松；
过渡：所有。2轻松；
将改变：转变
}
.ios13分段控件。选项输入：选中+标签：：之前，
.ios13分段控件。选项输入：选中+标签：：后{
背景：var（--背景）；
z指数：1
}
.ios13分段控件。选项输入：选中+标签{
游标：默认值
}

哈尔
圣克鲁斯
安德烈

哈尔


Santacruz


Andheri

$（文档）.ready（函数（）{
$（'input[type=“radio”]”）。单击（函数（）{
var inputValue=$（this.attr（“值”）；
变量targetBox=$（“+inputValue）；
$（“.select”）.not（targetBox.hide（）；
$（targetBox.show（）；
});
});

您可以直接给他们一个css属性display:none

<element style="display:none"></element>

---

好吧，看起来你手头上有你需要的一切，解决方案非常简单：去

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".selectt").not(targetBox).hide();
    $(targetBox).show();
  });
});

添加手动隐藏：

$(document).ready(function() {
  $('input[type="radio"]').each(function(index, element) {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(targetBox).hide();
  }).click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".selectt").not(targetBox).hide();
    $(targetBox).show();
  });
});

代码中的简单替换提供：

$（文档）.ready（函数（）{
$（“.ios13分段控件”）.on（“更改”，函数（）{
$（“.ios13分段控件.选项输入”）。每个（函数（i）{
if（$（this.is（“：checked”））$（“.ios13分段控件.selection”）.css(
“transform”、“translateX（“+（$（this）.outerWidth（）*i）+“px”）；
});
});
});
功能检查值（字段值）{
开关（字段值）{
案例1：
document.getElementByClassName（“选项”）.innerHTML=“Khar”；
打破