Javascript jquery开关更改列表的附加内容
我正在创建一个case/break循环，以更改将在中创建的新li。我已经非常接近了，但是当我将变量更改为重新指定li应该呈现存储在变量堆栈中的值的位置时。最终，您只能将li添加到每个ul，因为有一个选项可供选择 这是HTMLJavascript jquery开关更改列表的附加内容,javascript,jquery,html,switch-statement,Javascript,Jquery,Html,Switch Statement,我正在创建一个case/break循环，以更改将在中创建的新li。我已经非常接近了，但是当我将变量更改为重新指定li应该呈现存储在变量堆栈中的值的位置时。最终，您只能将li添加到每个ul，因为有一个选项可供选择 这是HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <link hre
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link href="https://fonts.googleapis.com/css?family=Anton|Baloo+Tammudu"
rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-
1.9.1.min.js"></script>
<script type="text/javascript"
src="file:///C:/Users/Will/Desktop/JS_Test/script.js"></script>
</head>
<body>
<div class=app>
<div id=menu_container> <div id=menu_title> Menu </div>
<input id="ListInput" /></input>
<button id="AddToList">Add</button>
</input>
<select id="GroceryType" list=hosting-plan>
<option>Select</option>
<option name=produce value=1>Produce</option>
<option name=baking value=2>Baking</option>
<option name=meat value=3>Meat</option>
<option name=dairy value=4>Dairy</option>
<option name=frozen value=5>Frozen</option>
<option name=etc value=6>Etc</option>
</select>
</div>
<div id=list_container><div id=list_title> Grocery List </div>
<div class=sublist_container>
<ul id="Produce">
Produce
</ul>
<ul id="Baking">
Baking
</ul>
<ul id="Meat">
Meat
</ul>
<ul id="Dairy">
Dairy
</ul>
<ul id="Frozen">
Frozen
</ul>
<ul id="Etc">
Etc
</ul>
</div>
</div>
</div>
</body>
它几乎可以工作，但我需要列表类型的变量一次只处理events 1选项 您可以尝试重写您的问题陈述。我几乎听懂了，但不完全确定我是否理解你。除非你已经解决了，否则我会尽力帮助你。你可以试着重写你的问题陈述。我几乎听懂了，但不完全确定我是否理解你。将尝试提供帮助，除非您已经解决它。您需要在更改它之前删除单击事件，这就是它被堆叠的原因。我还更改了附加参数的外观… 试试这个：
$（文档）.ready（函数（）{
$（“#GroceryType”）.change（函数（）{
设val=$（this.val（）；
控制台日志（val）；
$（“#AddToList”）.off（'click'）；//这是新的
开关（val）{
案例“1”：
$（'#AddToList'）。单击（函数（）{
$（“#product”）.append（“”+$（“#ListInput”）.val（）+“ ”）；//这些都已更改，但可以通过多种方式完成
});
打破
案例“2”：
$（'#AddToList'）。单击（函数（）{
$（'#Baking'）.append（''+$（'#ListInput'）.val（）+' '）；
});
打破
案例“3”：
$（'#AddToList'）。单击（函数（）{
$（'#Meat'）.append（''+$（'#ListInput'）.val（）+' '）；
});
打破
案例“4”：
$（'#AddToList'）。单击（函数（）{
$（'#Dairy'）.append（''+$（'#ListInput'）.val（）+' '）；
});
打破
案例“5”：
$（'#AddToList'）。单击（函数（）{
$（“#冻结”）.append（“”+$（“#ListInput”）.val（）+” ”；
});
打破
案例“6”：
$（'#AddToList'）。单击（函数（）{
$（'#Dairy'）.append（''+$（'#ListInput'）.val（）+' '）；
});
}
});
});
.app{
宽度：100%；
高度：1400px；
背景色：#d3c9bc；
位置：相对位置；
}
#菜单容器，
#列表容器{
位置：绝对位置；
顶部：10em；
宽度：25em；
填充：1em；
背景色：#e59b80；
}
#菜单容器{
位置：相对位置；
左：30%；
身高：5公分；
顶部：2米；
}
#菜单标题{
背景色：#E580；
位置：绝对位置；
宽度：40%；
左：32%；
文本对齐：居中；
}
#地址列表{
位置：绝对位置；
最高：40%；
左：10%；
}
#列表输入{
位置：绝对位置；
最高：40%；
左：20%；
宽度：60%；
}
#杂货店类型{
位置：绝对位置；
底部：15%；
左：15%；
}
#列表标题{
背景色：#E580；
位置：绝对位置；
宽度：40%；
左：32%；
文本对齐：居中；
}
#列表容器{
顶部：10em；
左：30%；
最小高度：40em；
最大高度：200em；
}
#生产,，
#肉，
#烘焙，
#奶制品，
#冻结，
#等{
最小宽度：10em；
最小高度：1米；
背景色：#9fe580；
溢出包装：断开单词；
断字：断字；
单词包装：打断单词；
连字符：自动；
}
.sublist_容器{
位置：绝对位置；
最高：15%；
左：10%；
高度：30公分；
宽度：75%；
背景色：#80e5b2；
}
菜单
添加
挑选
产生
烘烤
肉
乳品的
冻结的
等
杂货清单
产生
烘烤
肉
乳品的
冻结的
等
在更改单击事件之前，您需要删除它，这就是为什么它会堆叠。我还更改了附加参数的外观…
试试这个：
$（文档）.ready（函数（）{
$（“#GroceryType”）.change（函数（）{
设val=$（this.val（）；
控制台日志（val）；
$（“#AddToList”）.off（'click'）；//这是新的
开关（val）{
案例“1”：
$（'#AddToList'）。单击（函数（）{
$（“#product”）.append（“”+$（“#ListInput”）.val（）+“ ”）；//这些都已更改，但可以通过多种方式完成
});
打破
案例“2”：
$（'#AddToList'）。单击（函数（）{
$（'#Baking'）.append（''+$（'#ListInput'）.val（）+' '）；
});
打破
案例“3”：
$（'#AddToList'）。单击（函数（）{
$（'#Meat'）.append（''+$（'#ListInput'）.val（）+' '）；
});
打破
案例“4”：
$（'#AddToList'）。单击（函数（）{
$（'#Dairy'）.append（''+$（'#ListInput'）.val（）+' '）；
});
打破
案例“5”：
$（'#AddToList'）。单击（函数（）{
$（“#冻结”）.append（“”+$（“#ListInput”）.val（）+” ”；
});
打破
案例“6”：
$（'#AddToList'）。单击（函数（）{
$（'#Dairy'）.append（''+$（'#ListInput'）.val（）+' '）；
});
}
});
});
.app{
宽度：100%；
高度：1400px；
背景色：#d3c9bc；
位置：相对位置；
}
#菜单容器，
#列表容器{
位置：绝对位置；
顶部：10em；
宽度：25em；
填充：1em；
背景色：#e59b80；
}
#菜单容器{
位置：相对位置；
左：30%；
身高：5公分；
顶部：2米；
}
#菜单标题{
背景色：#E580；
位置：绝对位置；
宽度：40%；
左：32%；
文本对齐：居中；
}
#地址列表{
位置：绝对位置；
最高：40%；
左：10%；
}
#列表输入{
位置：绝对位置；
最高：40%；
左：20%；
宽度：60%；
}
#杂货店类型{
位置：绝对位置；
底部：15%；
左：15%；
}
#列表标题{
背景色：#E5
$(document).ready(function () {
$("#GroceryType").change(function () {
let val = $(this).val();
console.log(val);
switch (val) {
case '1':
$('#AddToList').click(function(){
$('#Produce').append($('<li>', {
text: $('#ListInput').val()
}));
});
break;
case '2':
$('#AddToList').click(function(){
$('#Baking').append($('<li>', {
text: $('#ListInput').val()
}));
});
break;
case '3':
$('#AddToList').click(function(){
$('#Meat').append($('<li>', {
text: $('#ListInput').val()
}));
});
break;
case '4':
$('#AddToList').click(function(){
$('#Dairy').append($('<li>', {
text: $('#ListInput').val()
}));
});
break;
case '5':
$('#AddToList').click(function(){
$('#Frozen').append($('<li>', {
text: $('#ListInput').val()
}));
});
break;
case '6':
$('#AddToList').click(function(){
$('#Dairy').append($('<li>', {
text: $('#ListInput').val()
}));
});
}
});
.app{
width: 100%;
height: 1400px;
background-color: #d3c9bc;
position:relative;
}
#menu_container, #list_container{
position: absolute;
top: 10em;
width: 25em;
padding: 1em;
background-color: #e59b80;
}
#menu_container{
position:relative;
left: 30%;
height: 5em;
top: 2em;
}
#menu_title{
background-color: #e5e580;
position: absolute;
width:40%;
left:32%;
text-align:center;
}
#AddToList{
position: absolute;
top: 40%;
left:10%;
}
#ListInput{
position:absolute;
top: 40%;
left: 20%;
width:60%;
}
#GroceryType{
position: absolute;
bottom: 15%;
left:15%;
}
#list_title{
background-color: #e5e580;
position: absolute;
width:40%;
left:32%;
text-align:center;
}
#list_container{
top: 10em;
left: 30%;
min-height: 40em;
max-height: 200em;
}
#Produce, #Meat, #Baking, #Dairy, #Frozen, #Etc{
min-width: 10em;
min-height:1em;
background-color: #9fe580;
overflow-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
hyphens: auto;
}
.sublist_container{
position: absolute;
top: 15%;
left: 10%;
height: 30em;
width: 75%;
background-color: #80e5b2;
}
case '1':
$('#AddToList').off().on('click',function(){
$('#Produce').append($('<li>', {
text: $('#ListInput').val()
}));
});
break;
function addToList(elementId) {
$('#AddToList').off().on('click',function(){
$('#'+elementId).append('<li>'+$('#ListInput').val()+'</li>');
});
}
case '1':
addToList("Produce");
break;
case '2':
addToList("Baking");
break;
case '3':
addToList("Meat");
break;
case '4':
addToList("Dairy");
break;
case '5':
addToList("Frozen");
break;
case '6':
addToList("Etc");
break;