javascript - jquery switch to change what list is appended to -
i creating case / break loop change ul new li created in. have gotten pretty close when change variable reassign li should render value stored in variable stacks. can add li every ul there option for.
here html
<!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> then script:
$(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() })); }); } }); });
and css:
.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; } it works need variable list types handle events 1 option @ time.
you need remove click event before change it, thats why stacking. changed how append parameters look...
try this:
$(document).ready(function() { $("#grocerytype").change(function() { let val = $(this).val(); console.log(val); $('#addtolist').off('click');//this new switch (val) { case '1': $('#addtolist').click(function() { $('#produce').append('<li>'+$('#listinput').val()+'</li>');//these changed can done many ways }); break; case '2': $('#addtolist').click(function() { $('#baking').append('<li>'+$('#listinput').val()+'</li>'); }); break; case '3': $('#addtolist').click(function() { $('#meat').append('<li>'+$('#listinput').val()+'</li>'); }); break; case '4': $('#addtolist').click(function() { $('#dairy').append('<li>'+$('#listinput').val()+'</li>'); }); break; case '5': $('#addtolist').click(function() { $('#frozen').append('<li>'+$('#listinput').val()+'</li>'); }); break; case '6': $('#addtolist').click(function() { $('#dairy').append('<li>'+$('#listinput').val()+'</li>'); }); } }); });.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; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!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>
Comments
Post a Comment