Question

我有一个包含多个表单的php页面。总共大约9个，但为了简洁起见，我的例子只反映了4个。我终于得到了代码来成功找到元素ID，具体取决于哪个按钮单击它的表单并验证是否已将url正确添加到表单中，如果不是它将显示错误消息并突出显示输入（同时还留下一个在span标签的div底部支持错误消息。代码工作得很好，欢迎任何人使用它，如果需要的话。我只需要帮助来缩小它。无论如何都要使Switch不那么笨重？

===示例表格HTML（一页上有几个）===

<div class="thumbnail">

    <form id="buyMe" action="#" method="post">
            <input type="hidden" name="none" value="#">
            <input type="hidden" name="#">
        <table id="myTable">
            <tr><td><select id="select" name="os0">
                    <option value="opt1">option 1</option>
                    <option value="opt2">Option 2</option>
                    <option value="opt3">Option 3</option>
                    <option value="opt4">Option 4</option>
                </select> 
            </td></tr>
            <tr><td><input type="hidden" id="on1" name="on1" value="This Title">This One Title</td></tr>
            <tr><td><input id="os1" type="text" value="http://" name="urlText" maxlength="200"></td></tr>
        </table>
            <input type="hidden" name="something" value="something">
            <button alt="tryThis" id="purchase1" name="submit" class="btn" type="image">Try This</button>
            <img alt="" border="0" src="pixel.gif" width="1" height="1">
    </form>
    <span id="msgsText1">Error Msgs appear here</span>
</div>

=== JQuery SWITCH / CASE ==

    //BEGINNING OF SWITCH CODE
    emptyerror2 = "Please enter a valid URL";
    htmlEmpty = "Please use the proper URL format";
    success2 = "Added to cart successfully!";

$(' :button').click(function (e) {
    var btns = ["purchase1", "purchase2", "purchase3", "purchase4"];
    for (var i = 0, ii = btns.length; i < ii; i++) {
        var aTc = btns[i];
        var whatSpan = $(this).parent('#buyMe').nextAll('span').eq(0).attr('id');
        var msgSpan = $('#'+ whatSpan);
        var whoseInput = $(this).siblings('#myTable').find(':input').eq(2).attr('id');
        var myInput = $('#'+ whoseInput);
        if ((e.target || e.srcElement).id == aTc) {
            switch (aTc) {
                case 'purchase1':
                            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
                case 'purchase2':
                            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
                case 'purchase3':
                            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
                case 'purchase4':
    if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
               }//end of switch
            } //end of if
        } // end of for loop
    }); //end of button event code

Answer 1

我不太确定你是否需要循环或开关。 switch语句看起来都一样。跨度和输入似乎都由执行上下文决定。那怎么样：

  $(' :button').click(function (e) {
        var whatSpan = $(this).parent('#buyMe').nextAll('span').eq(0).attr('id');
        var msgSpan = $('#'+ whatSpan);
        var whoseInput = $(this).siblings('#myTable').find(':input').eq(2).attr('id');
        var myInput = $('#'+ whoseInput);
        if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            }

如果您担心“迷路”点击事件（页面上有其他按钮），请为这四个提供一个独特的课程。否则，您似乎只是检查按钮是否是四个中的一个（您可以知道它是什么）并执行相同的验证，无论哪个。当然，我可能会遗漏一些东西！

Answer 2

有几种方法可以使代码更紧凑。

一种是使用对象进行切换：

var switcher = { 'purchase1': purchase1, ... };
...
switcher[aTc]();

这允许您将代码分布在多个函数上。接下来，似乎每个switch语句中的代码看起来非常相似。所以你可以使用这种模式：

var data = { msgSpan: $('#'+ whatSpan), ... };
var validators = { 'purchase1': function(text) {
    return !/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(text); }
    ...
};
var validator = validators[aTc];
updateUI(data, validator(myInput.val()));

对于每种情况，函数updateUI都是相同的。

这种方法允许您将巨大的功能拆分为许多可以独立测试的小构建块。您还可以为每个作为可靠文档来源的作品提供有意义的名称。

或者您可以在创建元素时使用jQuery.data()将验证器附加到元素，并像这样使用它：

var validator = myInput.data('validator');
updateUI(data, validator(myInput.val()));

使动态JQuery Switch语句不那么笨重

2 个答案: