-1

<td>ユーザー入力と要素クラスに基づいて、画面上で複数のフィールドを表示または非表示にしようとしています。私はjquery、html、およびjavascriptを使用しています。

基本的に、さまざまなフィールドを持つ HTML テーブルがあります。これらのフィールドには、「可視」、「可視および必須」、または「不可視」のいずれかのクラスが必要です。ユーザーがオプションを選択すると、前のものを削除して新しいものを追加することにより、その要素のクラスが変更されます。これらのフィールドのオンロードのデフォルトは非表示にする必要があります。

HTML:

<body onload="ShowTheScreen()">

<table border="1">
 <tr>
  <td class="ReasonCode" align="center">
   <span class="FieldLabel">Reason Code</span>
  </td>
  <td class="CostCenter" align="center">
   <span class="FieldLabel">Cost Center</span>
  </td>
 </tr>
 <tr>
  <td class="ReasonCode" align="center">
   <input type="text" id="ReasonCode" name="ReasonCode" value="1243">
  </td>
  <td class="CostCenter" align="center">
   <input type="text" id="CostCenter" name="CostCenter" value="00123">
  </td>
 </tr>
</table>

<input type="button" value="MakeVis" onclick="PopulateTable()">

</body>

Javascript:

function ShowTheScreen(){
  ToggleFieldVisibility(".ReasonCode", 3);
  ToggleFieldVisibility(".CostCenter", 3);
  DisplayFields();
}

function PopulateTable(){
  ToggleFieldVisibility(".ReasonCode", 2);
  ToggleFieldVisibility(".CostCenter", 1);
  DisplayFields();
}

function ToggleFieldVisibility(element, x){
 switch(x){
  case 1:
   $(element).removeClass("Invisible Required").addClass("Visible");
   break;
  case 2:
   $(element).removeClass("Invisible").addClass("Visible Required");
   break;
  case 3:
   $(element).removeClass("Visible Required").addClass("Invisible");
   break;
  default:
   $(element).removeClass("Visible Required").addClass("Invisible");
   break;
 }
 DisplayFields();
}

function DisplayFields(){
 $(".Invisible").css({"visibility":"hidden"});
 $(".Visible").css({"visibility":"visible"});
}

私が抱えている問題は次のとおりです。ページを開くと、フィールドに「非表示」クラスが追加され、非表示になります。しかし、後で非表示のクラスを削除して可視のクラスを追加しようとすると、非表示のクラスは削除されず、可視のクラスも追加されません。要素は最初に持っていたクラスをそのまま保持するため、非表示のままになります。

jquery add/removeClass の問題に関連する以前のスレッドを見ましたが、私を助けてくれるようなものはありませんでした。さらに情報が必要な場合はお知らせください。

更新 1: 返信ありがとうございます。残念ながら、私はこれが起こると思っていました。ここに投稿したコードは、私が実際に持っているコードのはるかに単純化されたバージョンであり、受け取った回答のほとんどは、投稿された構文に関連しているようです-引用符の問題のように. 私が実際に行っていることをよりよく反映するようにコードを更新しました。うまくいけば、これで問題の内容が絞り込まれます。

更新 2: 私が間違っていたことを知っています。ここに示したコードでは、正常に動作する ToggleFieldVisibility(".ReasonCode", 2) を呼び出しています。しかし、実際のコードでは、外部アプリケーションを使用して SQL 呼び出しから数値 2 を取得し、それを文字列として返していました。「2」はスイッチ内の 2 と比較され (または「1」は 1 に、「3」は 3 に)、常にデフォルトになるため、これらのフィールドは常に非表示になります。ハッ！

4

2 に答える 2

3

onClick問題はインラインハンドラにあると思います。現在持っているように、引用符を属性区切り記号と文字列のラップの両方として使用しています。これにより、属性が切り捨てられToggleFieldVisibility("、関数が実行されなくなります。

試す：

<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)">
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)">
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)">

"何らかの理由で sを使用する必要がある場合は、いつでも \: でエスケープできます。(\".ReasonCode\"...

于 2012-06-06T13:40:02.127 に答える
1

簡単に推測するとDisplayFields()、最後に関数を呼び出すと、インライン スタイル タグの形式で要素に css が追加されます。.removeAttr("style")を実行した直後に実行してみてくださいremoveClass()

コード：

jquery:


function ToggleFieldVisibility(element, x){
            //alert("Hello");
            switch(x){
                case 1:
                    $(element).removeClass("Invisible Required").removeAttr("style").addClass("Visible");
                    break;
                case 2:
                    $(element).removeClass("Invisible").removeAttr("style").addClass("Visible Required");
                    break;
                case 3:
                    $(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
                    break;
                default:
                    $(element).removeClass("Visible Required").removeAttr("style").addClass("Invisible");
                    break;
                }
            DisplayFields();
        }

        function DisplayFields(){
            $(".Invisible").css({"visibility":"hidden"});
            $(".Visible").css({"visibility":"visible"});
        }

html:


<body onload="ToggleFieldVisibility('.ReasonCode .CostCenter', 3)">
<table border="1">
 <tr>
  <td class="ReasonCode" align="center">
   <span class="FieldLabel">Reason Code</span>
  </td>
  <td class="CostCenter" align="center">
   <span class="FieldLabel">Cost Center</span>
  </td>
 </tr>
 <tr>
  <td class="ReasonCode" align="center">
   <input type="text" id="ReasonCode" name="ReasonCode" value="1243">
  </td>
  <td class="CostCenter" align="center">
   <input type="text" id="CostCenter" name="CostCenter" value="00123">
  </td>
 </tr>
</table>

<input type="button" value="MakeVis" onclick="ToggleFieldVisibility('.ReasonCode', 1)" />
<input type="button" value="MakeVisReq" onclick="ToggleFieldVisibility('.ReasonCode', 2)" />
<input type="button" value="MakeInVis" onclick="ToggleFieldVisibility('.ReasonCode', 3)" />

</body>
于 2012-06-06T13:34:42.350 に答える