0

HTML コードの一部を以下に示します。明らかに2種類のオプションがあります -

ICMP エラー メッセージ (8 つのオプション) と ICMP 情報メッセージ (約 30 のオプション)。

合計 48 のオプションがあり、選択ごとに対応するパケット構造が表示されます。

まず、HTML を見てください。

   <tr class="icmperr"><td>
     <select name="icmpmsgerrtyp"  id="icmpmsgerrtyp">
          <option value="res" onclick="icmptyp();">0-Reserved</option>
          <option value="desun" onclick="icmptyp();">1-Destination Unreachable</option>
          <option value="ptb" onclick="icmptyp();">2-Packet Too Big</option>
          <option value="timeex" onclick="icmptyp();">3-Time Exceeded</option>
          <option value="paraprob" onclick="icmptyp();">4-Parameter Problem</option>
        <option value="privex" onclick="icmptyp();">100-Private Experimentation</option>
       <option value="privex1" onclick="icmptyp();">101-Private Experimentation</option>
       <option value="resexp" onclick="icmptyp();">127-Reserved For expansion Of ICMPv6 Error Messages </option>
       </select> <br\>

  </td></tr>


   <tr class="icmpinfo"><td>
     <select name="icmpinfotyp"  id="icmpinfotyp">
     <option value="echoreq" onclick="icmptyp();">128-Echo Request</option>
     <option value="echorep" onclick="icmptyp();">129-Echo Reply</option>
     <option value="mlq" onclick="icmptyp();">130-Multicast Listener Query</option>
     <option value="mlr" onclick="icmptyp();">131-Multicast Listener Report</option>
     <option value="mld" onclick="icmptyp();">132-Multicast Listener Done</option>
     <option value="rs" onclick="icmptyp();">133-Router Solicitation(NDP)</option>
     <option value="ra" onclick="icmptyp();">134-Router Advertisement(NDP)</option>
     <option value="ns" onclick="icmptyp();">135-Neighbour Solicitation(NDP)</option>
     <option value="na" onclick="icmptyp();">136-Neighbour Advertisement(NDP)</option>
     <option value="redmsg" onclick="icmptyp();">137-Redirect Message(NDP)</option>
     <option value="rr" onclick="icmptyp();">138-Router Renumbering</option>
     <option value="niq" onclick="icmptyp();">139-ICMP Node Information Query</option>
     <option value="nir" onclick="icmptyp();">140-ICMP Node Information    
     Response</option>
     <option value="indsm" onclick="icmptyp();">141-Inverse Neighbor Discovery 
     Solicitation Message</option>
     <option value="indam" onclick="icmptyp();">142-Inverse Neighbor Discovery 
     Advertisement Message</option>
     <option value="mldr" onclick="icmptyp();">143-Multicast Listener Discovery (MLDv2) 
     Reports</option>
     <option value="hadreqm" onclick="icmptyp();">144-Home Agent Address Discovery 
     Request Message</option>
     <option value="hadresm" onclick="icmptyp();">145-Home Agent Address Discovery 
     Reply Message</option>
     <option value="mps" onclick="icmptyp();">146-Mobile Prefix Solicitation</option>
     <option value="mpa" onclick="icmptyp();">147-Mobile Prefix Advertisement</option>
     <option value="cps" onclick="icmptyp();">148-Certification Path Solicitation (SEND)
     </option>
     <option value="cpa" onclick="icmptyp();">149-Certification Path Advertisement 
     (SEND)</option>
     <option value="mra" onclick="icmptyp();">151-Multicast Router Advertisement 
     (MRD)</option>
     <option value="mrs" onclick="icmptyp();">152-Multicast Router Solicitation 
     (MRD)</option>
     <option value="mrt" onclick="icmptyp();">153-Multicast Router Termination 
     (MRD)</option>
     <option value="rcm" onclick="icmptyp();">155-RPL Control Message</option>
     <option value="pex" onclick="icmptyp();">200-Private Experimentation</option>
     <option value="pex1" onclick="icmptyp();">201-Private Experimentation</option>
     <option value="resexpim" onclick="icmptyp();">255-Reserved for expansion of ICMPv6 
     informational messages</option>


     </select> <br\>
     </td></tr>

ここで、ICMP Inofrmational message-ECHO Request のオプションを指定したいとします。

だからそれは次のようになります -

  <option value="echoreq" onclick="icmptyp();echoreq();">128-Echo   
  Request</option>

  and then a jquery function echoreq() will go like this -


   function echoreq() {

      $(".echoreq").css("visibility", "visible");
      $(".echoreq").css("display", "table-row");  

      and 47*2 lines to make others invisible

   }

約 48 のそのような機能があります。そのため、非常に長くなります。

クラス/関数名を使用するか、どこかで正規表現を使用する際にある種のスマートさを示すことによって、スペースを節約する方法について何か提案がありますが、わかりませ
ん。

些細なことが抜けている場合はご容赦ください。タイトルにも編集が必要です。前もって感謝します。

編集：

こんな感じで使いました。ここで何が問題なのですか？

サンプル HTML -

    <tr class="icmppac icmppacdesun">
       <td width="249">Unused</td>
       <td width="249"><input type="text" name="icmppacdesun" size="20"  
       id="icmppacdesun"/> [Default : 0] </td>
    </tr>

そして、このような関数呼び出し -

  <option value="desun" onclick="icmptyp();icmppacstr('.icmppacdesun');">1-Destination 
  Unreachable</option>

そしてこのようなjquery -

    function icmppacstr(myobject) {

                     $(myobject).css("visibility", "visible");
                     $(myobject).css("display", "table-row");

                     $(".icmppac").css("visibility", "hidden");
                     $(".icmppac").css("display", "none");

    }

EDIT2：

  ....... 
  <select name="icmpmsgerrtyp"  id="icmpmsgerrtyp" onchange="myfun2(this.value)">
  ..... 
  <select name="icmpinfotyp"  id="icmpinfotyp" onchange="myfun2(this.value)">
  ....

そしてmyfun2はこんな感じでした...

 function myfun2(object)
 {
  if(object=="desun")
  {

   // working fine 
   icmppacstr('.icmppacdesun');
  }
 //and so on for first select

  if(object=="echoreq")
  {
   alert('hi'); // its getting printed
   icmppacstr('.icmppacechoreq'); // but its not executing
  }
 //and so on for second select     


}

最初の選択に対応するオプションではうまくいきますが、2番目の選択オプションからいずれかを選択しても何も起こりません。

4

4 に答える 4

1

なぜ個別の関数を作成したいのですか? 単純に 1 つの関数を作成し、それにパラメーターを渡すことができます。例えば：

    function myfun(myobject) {

          $(myobject).css("visibility", "visible");
          $(myobject).css("display", "table-row");
       }

編集を確認した後にオプションの onclick を呼び出すのではなく、select の onchange を使用することをお勧めします。したがって、次のようになります。

<select name="icmpinfotyp"  id="icmpinfotyp" onchange="myfun2(this.value)">

そして機能はこのようになります

function myfun2(object)
{
  if(object=="desun")
  {
    icmptyp();
    icmppacstr('.icmppacdesun');
    // in my case myfun('.icmppacdesun');
  }
  //and so on
}
于 2012-11-23T11:38:19.983 に答える
1

あなたの問題はあなたのケースに非常に固有であるため、あなたが何をしようとしているのか完全にはわかりません...私が理解しているように、ページに複数の要素があり、それぞれに特定のクラス名があり、非表示の呼び出しを避けたいすべての要素。

あなたができることは、すべての要素に 2 つのクラスを与えることです。1 つは各要素に固有のもので、もう 1 つはすべての要素で共有されます。

たとえば、Item1、Item2、Item3 の 3 つの要素があるとします。次に、次のようにします。

<div class="item item-1"</div>
<div class="item item-2"</div>
<div class="item item-3"</div>

ここで、関数を少し変更する必要があります。表示するアイテムのクラスを指定するパラメーターを導入します。

function echoreq(var displayItem) {
    $(".item").css("display", "none");
    $(displayItem).css("display", "table-row");  
}

通話を更新することを確認してください

于 2012-11-23T11:42:12.843 に答える
0

onclickで使用しないでください<option>-すべてのブラウザで機能するわけではありません。代わりに、で使用onchangeして<select>ください。

また、すべてのパケット/情報アイテムに共通のクラスを追加して、表示と非表示を簡単にします。クラスが呼び出されたとすると.option-item、単一のアイテムは次のようになります。

<div class="option-item echoreq">...</div>

そして、コードは次のようになります。

// First, let's cache all the packets/option items for future reference:
var $optionItems = $('.option-item');

$('#icmpinfotyp').on('change', function(){
    // using .val() you get the contents of the value atttribute
    // of the selected option
    var selectedValue = $(this).val();

    // now hide all packets/option items:
    $optionItems.css({'visibility': 'hidden','display': 'none'}); // or use jQuery .hide()
    // and show the selected:
    $('.' + selectedValue).css({'visibility': 'visible','display': 'table-row'});

});
于 2012-11-23T11:59:45.470 に答える
0

これは非常に簡単です。

これを 4 行に凝縮して、見苦しいインライン HTML をすべて取り除くことができますonclick。

// select every option tag beneath id icmpinfotyp and id icmpmsgerrtyp
// bind the click function to all of those elements
$('#icmpinfotyp option, #icmpmsgerrtyp option').click(function() {
   // by using $(this), we only apply the css changes to whichever element is clicked on
   $(this).css("visibility", "visible");
   $(this).css("display", "table-row");
});

必要に応じて、これを変更してください。48 個の個別の関数を使用する必要がある理由はありません。自動化をうまく活用しよう！

于 2012-11-23T11:38:58.913 に答える