Question

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

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条件修改渲染文本，如下所示：

SCRIPT

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/

Answer 1

以下是简化实施的相关部分。

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语句，但我没有那么做。此外，在if / else块的每个条件中重复chosenSite个操作，因此我将它们移出if语句以消除重复的代码。

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

有什么更好的方法来安排这些多个if else条件？

1 个答案: