我正在尝试清理我们网站上的一些代码(目前的形式,我们必须为我们提供的所有产品制作50个左右的JS文件和50个左右的PHP文件)。我正在看代码,它应该工作,所以我很困惑,我搞砸了。似乎根本没有调用函数(我在它的顶部放置了一个从未调用过的警报)所以我假设我搞砸了第一部分中的内容。
<select class="gameserverselecion4" name="slots">
<option value="10|457">10 Slots - 9.90 / mo</option>
<option value="12|458">12 Slots - 11.88 / mo</option>
<option value="14|459">14 Slots - 13.86 / mo</option>
<option value="16|460">16 Slots - 15.84 / mo</option>
<option value="18|461">18 Slots - 17.82 / mo</option>
<option value="20|462">20 Slots - 19.80 / mo</option>
<option value="22|463">22 Slots - 21.78 / mo</option>
<option value="24|464">24 Slots - 23.76 / mo</option>
<option value="26|465">26 Slots - 25.74 / mo</option>
<option value="28|466">28 Slots - 27.72 / mo</option>
<option value="30|467">30 Slots - 29.70 / mo</option>
<option value="32468">32 Slots - 31.68 / mo</option>
</select>
</div>
<div id="inputTopRight">
<input type="button" name="submit" onclick="ProcessOrder('0','167','44');"/>
</div>
然后Javascript ...
function ProcessOrder(loc,pid,cfopID)
{
var values = document.dropTop.slots.value;
var valuesArray = values.split("|");
var slots = valuesArray[0];
var cfopValue = valuesArray[1];
alert("Slots is: " + slots " cfopValue is:" + cfopValue);
switch (slots)
{
case 10:
{
window.location = "https://www.xfactorservers.com/clients/cart.php?a=add&pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue;
}
case 12:
{
window.location = "https://www.xfactorservers.com/clients/cart.php?a=add&pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue;
}
答案 0 :(得分:8)
您的代码有几个问题。
1。 最好避免在自己的行上添加大括号,或者automatic semicolon insertion会在某个时间找到你。
更新(2015年7月21日):正如评论中所指出的那样,在这种情况下应该没问题,因为返回的对象文字是不同的并且是边缘情况。不过,我仍然喜欢把支架放在同一条线上以保证安全。
所以不要这样:
function sayHello()
{
alert('Hello, world!');
}
你应该这样做:
function sayHello() {
alert('Hello, world!');
}
2。 你不应该在案件周围使用大括号。相反,用break语句结束它们。
更新(2015年7月21日):使用大括号很好,但它们不会替换
break
。如果您不使用它,它将在执行该特定情况后“落入”下一个案例。
错:
switch (number) {
case 4: {
doSomething();
}
case 9: {
doSomething();
}
}
正确:
switch (number) {
case 4:
doSomething();
break;
case 9:
doSomething();
break;
}
3。 switch语句和函数未关闭。
4. 此行有语法错误。
alert("Slots is: " + slots " cfopValue is:" + cfopValue);
// ^---here
这是正确的语法:
alert("Slots is: " + slots + " cfopvalue is:" + cfopvalue);
1。您可以合并多个var语句。
而不是:
var a = 'foo';
var b = 'bar';
var c = 'baz';
你可以这样做:
var a = 'foo',
b = 'bar',
c = 'baz';
2. 您可以在switch语句中组合多个案例。
switch (number) {
case 3:
case 12:
doSomething();
break;
}
第3 强>
alert("Slots is: " + slots + " cfopvalue is:" + cfopvalue);
这将显示如下内容:
插槽是:10 cfopvalue是:20
您可能希望插入换行符(\n
)以使其看起来更好:
alert("slots is: " + slots + "\n" + "cfopvalue is: " + cfopvalue);
插槽是:10
cfopvalue是:20
4. 保持您的内容,样式和脚本分开。因此,不要使用内联事件处理程序,最好在JS代码中设置事件处理程序,如下所示:
function addEvent(element, eventType, eventHandler) {
if (window.addEventListener) {
element.addEventListener(eventType, eventHandler, false);
} else {
element.attachEvent('on' + eventType, eventHandler);
}
}
使用示例:
addEvent(document.getElementsByName('submit'), 'click', function() {
ProcessOrder('0', '167', '44');
});
您还可以使用jQuery [docs] 等库。它会使事情变得更简单。
更新(2015年7月21日):像jQuery这样的库是一个很有用的工具,但你不应该完全依赖它们。熟悉“vanilla”JavaScript也很重要。
jQuery为您处理跨浏览器不兼容问题,并使用CSS选择器来选择元素。作为参考,这是你用jQuery编写上述事件处理程序代码的方法:
$('[name="submit"]').click(function () {
ProcessOrder('0', '167', '44');
});
答案 1 :(得分:1)
此行有语法错误:
alert("Slots is: " + slots " cfopValue is:" + cfopValue);
// ^-- here
...这可能是你没有看到警报的原因。如果你修复它,你可能会发现函数被调用(因为上面的语法错误阻止它被定义)。
一旦你达到调用该函数的程度,你仍然会遇到(无关)问题:你的switch
语句的语法错误,尽管相当无害的方式只要你确实希望所有条件都相互渗透。单个case
未包含在大括号中,解析器完全忽略了那些大括号。您使用case
终止break
,因此:
switch (slots)
{
case 10:
window.location = "https://www.xfactorservers.com/clients/cart.php?a=add&pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue;
break;
case 12:
window.location = "https://www.xfactorservers.com/clients/cart.php?a=add&pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue;
break;
default:
// do whatever you do if nothing matches (this is optional)
break;
}
没有中断,每个case
的代码将流入下一个。例如,在您的原始版本中,如果slots
为10
,则首先将窗口位置设置为10
情况下的窗口位置,然后执行将继续使用12
个案并将其设置到其他位置等等。
偏离主题:您可以在该功能中分解出 lot 的共性<;例如:
function ProcessOrder(loc,pid,cfopID)
{
var values = document.dropTop.slots.value;
var valuesArray = values.split("|");
var slots = valuesArray[0];
var cfopValue = valuesArray[1];
var destinationMap = {
"10": "pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue,
"12": "pid=" + pid + "&configoption[" + cfopID + "]=" + cfopValue,
"14": "pid=167&configoption[44]=459",
"16": "pid=167&configoption[44]=460",
"18": "pid=167&configoption[44]=461",
"20": "pid=167&configoption[44]=462",
"22": "pid=167&configoption[44]=463",
"24": "pid=167&configoption[44]=464",
"26": "pid=167&configoption[44]=465",
"28": "pid=167&configoption[44]=466",
"30": "pid=167&configoption[44]=467",
"32": "pid=167&configoption[44]=468"
};
var dest = destinationMap[slots];
if (dest) {
window.location = "https://www.xfactorservers.com/clients/cart.php?a=add&" + dest;
}
else {
// Do whatever you should do if `slots` isn't a value you recognize
}
}
(我在每个字符串中留下pid=
,因为在我看来它对上下文有帮助。)