Javascript 将jQuery重构为vanila JS以进行自定义选择
我有一个自定义select，其中包含一些jQuery代码，我无法将其转换为纯JavaScript 基于代码笔，我尝试了3次选择Javascript 将jQuery重构为vanila JS以进行自定义选择,javascript,html,jquery,Javascript,Html,Jquery,我有一个自定义select，其中包含一些jQuery代码，我无法将其转换为纯JavaScript 基于代码笔，我尝试了3次选择 const select=document.getElementsByClassName（'select-box'）； const label1=document.getElementById（“S1”）； const label2=document.getElementById（“S2”）； const label3=document.getElementById
const select=document.getElementsByClassName（'select-box'）；
const label1=document.getElementById（“S1”）；
const label2=document.getElementById（“S2”）；
const label3=document.getElementById（“S3”）；
const obj1=document.getElementById（'select-box1'）；
const obj2=document.getElementById（'select-box2'）；
const obj3=document.getElementById（'select-box3'）；
选择[0].classList.add（'open'）；
如果（obj1！==null）
{
常数x=obj1.0；
标签1.数值=x；
$（选择）.removeClass（'open'）；
}
如果（obj2！==null）
{
常数y=obj2.value；
标签2.数值=y；
$（选择）.removeClass（'open'）；
}
if（obj3！==null）
{
常数z=obj3.0；
标签3.数值=z；
$（选择）.removeClass（'open'）；
}@导入url(https://fonts.googleapis.com/css?family=Source+Sans+Pro）；
身体{
背景：#ffffff；
颜色：#414141；
字体：400 17px/2em“源代码无衬线”，无衬线；
}
.选择框{
光标：指针；
位置：相对位置；
最大宽度：20em；
保证金：5em自动；
宽度：100%；
}
.选择，
.标签{
颜色：#414141；
显示：块；
字体：400 17px/2em“源代码无衬线”，无衬线；
}
.选择{
宽度：100%；
位置：绝对位置；
排名：0；
填充：5px0；
高度：40px；
不透明度：0；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
背景：不透明；
边界：0无；
}
.选择框1{
背景:#ececec ;；
}
.标签{
位置：相对位置；
填充物：5px10px；
光标：指针；
}
.open.label:：after{
内容：“▲";
}
.标签：：之后{
内容：“▼";
字体大小：12px；
位置：绝对位置；
右：0；
排名：0；
填充：5px15px；
左边框：5px实心#fff；
}
选择一种颜色
红色
绿色
选一封信
A.
B
选择一个数字
9
8.
const select=document.querySelector（'select'）；
const selectBox=document.querySelector（“.select box”）
select.addEventListener（'click'，函数（e）{
selectBox.classList.toggle（“打开”）；
});
document.addEventListener（'mouseup'，函数（e）
{
如果（！selectBox.contains（如目标））{
选择box.classList.remove（“打开”）；
}
});
select.addEventListener（“更改”，函数（e）{
const label=selectBox.querySelector（'label'）；
const selection=select.options[select.selectedIndex].text；
label.querySelector（“.label desc”）.innerHTML=selection；
})；@导入url(https://fonts.googleapis.com/css?family=Source+Sans+Pro）；
身体{
背景：#ffffff；
颜色：#414141；
字体：400 17px/2em“源代码无衬线”，无衬线；
}
.选择框{
光标：指针；
位置：相对位置；
最大宽度：20em；
保证金：5em自动；
宽度：100%；
}
.选择，
.标签{
颜色：#414141；
显示：块；
字体：400 17px/2em“源代码无衬线”，无衬线；
}
.选择{
宽度：100%；
位置：绝对位置；
排名：0；
填充：5px0；
高度：40px；
不透明度：0；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
背景：不透明；
边界：0无；
}
.选择框1{
背景:#ececec ;；
}
.标签{
位置：相对位置；
填充物：5px10px；
光标：指针；
}
.open.label:：after{
内容：“▲";
}
.标签：：之后{
内容：“▼";
字体大小：12px；
位置：绝对位置；
右：0；
排名：0；
填充：5px15px；
左边框：5px实心#fff；
}
选择你的国家
福克兰群岛
德国
梦幻岛
getElementsByClassNameclassListremoveClass（）