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

確かに、これは 3 つの入力ボックスのうち 2 つの入力ボックスからのさまざまなパターンを一連の if/else ステートメントに結合するためのかなり強引な方法ですが、機能します。ただし、3 番目の入力ボックスを含めたい場合は、コーディングが非常に面倒になります。

しかし、私はこれまで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 ステートメントではなく一連のルールとしてロジックを宣言的に指定できるようになりますが、そこまでは行きませんでした。また、chosenSiteif/else ブロックのすべての条件で操作が繰り返されていたので、if ステートメントからそれらを移動して、その重複したコードも削除しました。

完全なコードについては、このjsfiddleを参照してください。

于 2013-07-18T03:22:38.333 に答える