0

我有一些用户输入框，它们会影响单击某些复选框时生成的某些文本的措辞。该站点的简化如下，因此我可以更好地说明我的问题。

HTML

WBC: <input size="6" id="WBC" name="index">
RBC: <input size="6" id="RBC" name="index">
HB: <input size="6" id="HB" name="index">
<br><br>
<label id="__partType100"><input id="partType100" name="partType" type="checkbox"> NORMAL  </label> <br>
<label id="__partType101"><input id="partType101" name="partType" type="checkbox"> NORMOCYTIC </label><br>
<label id="__partType102"><input id="partType102" name="partType" type="checkbox">  MICROCYTIC </label> <br>
<br><br>
<label id="_partType150"><input id="partType150" name="partType" type="checkbox"> NORMAL WBC, N&gt;L&gt;M </label> <br>
<label id="_partType151"><input id="partType151" name="partType" type="checkbox"> NORMAL BABY, L&gt;N&gt;M </label> <br>
<label id="_partType152"><input id="partType152" name="partType" type="checkbox"> MILD &#8595;, N&gt;L&gt;M </label> <br>

在输入框中输入一些值后，用户将单击顶部集和底部集的复选框。这将在文本区域中生成一些文本。我有一个工作脚本，它根据输入字段中的一系列 if/else 条件修改呈现的文本，如下所示：

脚本

function testAndFill(){
    if (chosenSite !== null){   
            // conditional arguments based on user inputs               

            var wbcIx = $('#WBC').val();
            var rbcIx = $('#RBC').val();
                if(wbcIx < 3.59 && rbcIx < 4 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|increased)/,"Leukocytes are decreased").replace(/The red cells are (normal|increased)/,"The red cells are decreased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx < 3.59 && (rbcIx > 4 && rbcIx < 5.91)){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|increased)/,"Leukocytes are decreased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx < 3.59 && rbcIx > 5.91 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|increased)/,"Leukocytes are decreased").replace(/The red cells are (normal|decreased)/,"The red cells are increased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if((wbcIx > 3.59 && wbcIx < 11.1) && rbcIx < 4 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/The red cells are (normal|increased)/,"The red cells are decreased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if((wbcIx > 3.59 && wbcIx < 11.1) && rbcIx > 5.91 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/The red cells are (normal|decreased)/,"The red cells are increased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx > 15.1 && rbcIx < 4 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|decreased)/,"Leukocytes are increased").replace(/The red cells are (normal|increased)/,"The red cells are decreased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx > 15.1 && (rbcIx > 4 && rbcIx < 5.91)){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|decreased)/,"Leukocytes are increased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else if(wbcIx > 15.1 && rbcIx > 5.91 ){
                mytextbox.value += partTypes[chosenSite.id].replace(/Leukocytes are (normal|decreased)/,"Leukocytes are increased").replace(/The red cells are (normal|decreased)/,"The red cells are increased");
                  //  resets the radio box values after output is displayed
                chosenSite.checked = false;
                // resets these variables to the null state
               chosenSite = null;
                }
                else {
                mytextbox.value += partTypes[chosenSite.id] + "";
                       // resets the radio box values after output is displayed
                    chosenSite.checked = false;
                    // resets these variables to the null state
                   chosenSite = null;
                    }
        }       
        if (chosenDiagnosis !== null){
        mytextbox.value += dxLines[chosenDiagnosis.id] + "";
        // resets the radio box values after output is displayed
        chosenDiagnosis.checked = false;
        // resets these variables to the null state
        chosenDiagnosis = null;
        }
    };

诚然，这是一种将三个输入框中的两个输入框的各种模式组合成一系列 if/else 语句的蛮力方式，但它确实有效。但是，如果我想包含第三个输入框，编码将非常繁琐。

但是，到目前为止，我对 javascript 所学知识的限制 - 所以任何关于如何更好地组织或重新思考这个 if/else 逻辑的建议都将不胜感激。这是一个小提琴，显示了我的网站的简化版本，上面有 if/else 语句：http: //jsfiddle.net/GzVu3/

4

1 回答 1

3

这是简化实现的相关部分。

function describeLeukocytes(baseText, wbcIx) {
    if (wbcIx < 3.59)
        return baseText.replace(/Leukocytes are (normal|increased)/, "Leukocytes are decreased");
    else if (wbcIx > 15.1)
        return baseText.replace(/Leukocytes are (normal|decreased)/, "Leukocytes are increased");
    else
        return baseText;
}

function describeRbc(baseText, rbcIx) {
    if (rbcIx < 4)
        return baseText.replace(/The red cells are (normal|increased)/, "The red cells are decreased");
    else if (rbcIx > 5.91)
        return baseText.replace(/The red cells are (normal|decreased)/, "The red cells are increased");
    else
        return baseText;
}

function testAndFill() {
    if (chosenSite !== null) {
        // conditional argument based on WBC count
        var wbcIx = $('#WBC').val();
        var rbcIx = $('#RBC').val();
        var text = partTypes[chosenSite.id];
        text = describeLeukocytes(text, wbcIx);
        mytextbox.value += describeRbc(text, rbcIx);
        //  resets the radio box values after output is displayed
        chosenSite.checked = false;
        // resets these variables to the null state
        chosenSite = null;
    }
    if (chosenDiagnosis !== null) {
        mytextbox.value += dxLines[chosenDiagnosis.id] + "";
        // resets the radio box values after output is displayed
        chosenDiagnosis.checked = false;
        // resets these variables to the null state
        chosenDiagnosis = null;
    }
}

由于确定 WBC 和 RBC 文本的条件是相互独立的，我们可以将它们分成不同的函数并消除重复代码。将这些检查转移到函数中使您的代码更具可重用性和自我描述性。这可能会被进一步重构以引入数字范围和文本占位符的概念，允许您以声明方式将您的逻辑指定为一组规则而不是过程 if 语句，但我没有走那么远。此外，chosenSite在 if/else 块的每个条件下都重复了这些操作，因此我将它们移出 if 语句以消除重复的代码。

有关完整代码，请参阅此jsfiddle。

于 2013-07-18T03:22:38.333 回答