在循环中使用.append（）在基于所选选项的之后添加对象中的文本(Using .append() in a loop to add text from an object after a base

在循环中使用.append（）在基于所选选项的 based on the selected option)

我想根据选择的选项选择一个选项后，在下拉菜单下插入文本和平。我编写的代码完全符合我的要求。但似乎应该有一种更快，更优雅的方式来处理我正在尝试做的事情。我在想循环，但循环让我感到困惑，我不确定我写的函数是做错了我尝试做到这一点。

这是我原来的工作代码：

$('#Total_Package_Pool_Size').change(function() { $('#PS_Dyn_warn').empty(); $('#PS_Dyn_warn').append("This is the exact size of the pool, this is not an up to size.") var PS_Warning_Obj = { one : " A pool 14 x 28 is track space 14 and track length 29", two : " A pool 16 x 32 is track space 16 and track length 33", three: " A pool 18 x 34 is track space 18 and track length 35", four : " A pool 20 x 40 is track space 20 and track lenght 41" }; var PS_Warning = document.getElementById('PS_Dyn_warn'); var sizeDD = document.getElementById('Total_Package_Pool_Size'); var sizeOpt = sizeDD.options[sizeDD.selectedIndex].text; switch (sizeOpt) { case "14 x 28": $('#PS_Dyn_warn').show(); $("#PS_Dyn_warn").append(PS_Warning_Obj.one); break; case "16 x 32": $('#PS_Dyn_warn').show(); $("#PS_Dyn_warn").append(PS_Warning_Obj.two); break; case "18 x 36": $('#PS_Dyn_warn').show(); $("#PS_Dyn_warn").append(PS_Warning_Obj.three); break; case "20 x 40": $('#PS_Dyn_warn').show(); $("#PS_Dyn_warn").append(PS_Warning_Obj.four); break; } });

这是我试图写的循环：

I want to insert a peace of text under a dropdown menu after an option has been selected based on what option was selected. I've written code that will do exactly what I want it to. But it seems like there should be a faster and more elegant way to handle what I'm trying to do. I'm thinking loop but loops confuse me a bit and I'm not sure what I've done wrong with the function I wrote to try do this.

Here is my original working code:

$('#Total_Package_Pool_Size').change(function() { $('#PS_Dyn_warn').empty(); $('#PS_Dyn_warn').append("This is the exact size of the pool, this is not an up to size.") var PS_Warning_Obj = { one : " A pool 14 x 28 is track space 14 and track length 29", two : " A pool 16 x 32 is track space 16 and track length 33", three: " A pool 18 x 34 is track space 18 and track length 35", four : " A pool 20 x 40 is track space 20 and track lenght 41" }; var PS_Warning = document.getElementById('PS_Dyn_warn'); var sizeDD = document.getElementById('Total_Package_Pool_Size'); var sizeOpt = sizeDD.options[sizeDD.selectedIndex].text; switch (sizeOpt) { case "14 x 28": $('#PS_Dyn_warn').show(); $("#PS_Dyn_warn").append(PS_Warning_Obj.one); break; case "16 x 32": $('#PS_Dyn_warn').show(); $("#PS_Dyn_warn").append(PS_Warning_Obj.two); break; case "18 x 36": $('#PS_Dyn_warn').show(); $("#PS_Dyn_warn").append(PS_Warning_Obj.three); break; case "20 x 40": $('#PS_Dyn_warn').show(); $("#PS_Dyn_warn").append(PS_Warning_Obj.four); break; } });

And here is the loop I tried to write:

最满意答案

像这样的东西更动态，只是在字符串中插入数字

$('#Total_Package_Pool_Size').change(function () { var sizeOpt = $('#Total_Package_Pool_Size option:selected').text(), arr = sizeOpt.split('x').map(function(x) { return +$.trim(x); }), text1 = "This is the exact size of the pool, this is not an up to size.", text2 = "A pool " + sizeOpt + " is track space " + arr[0] + " and track length " + (arr[1] + 1) $('#PS_Dyn_warn').text(text1 + text2).show(); });

小提琴

Something like this is more dynamic, just inserting the numbers in the strings

$('#Total_Package_Pool_Size').change(function () { var sizeOpt = $('#Total_Package_Pool_Size option:selected').text(), arr = sizeOpt.split('x').map(function(x) { return +$.trim(x); }), text1 = "This is the exact size of the pool, this is not an up to size.", text2 = "A pool " + sizeOpt + " is track space " + arr[0] + " and track length " + (arr[1] + 1) $('#PS_Dyn_warn').text(text1 + text2).show(); });

FIDDLE

更多推荐