Question

我正在尝试清理我们网站上的一些代码（目前的形式，我们必须为我们提供的所有产品制作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;
        }

Answer 1

您的代码有几个问题。

语法问题

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'); });

Answer 2

此行有语法错误：

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=，因为在我看来它对上下文有帮助。）

Javascript函数未调用onClick（）

2 个答案:

语法问题

样式问题