php - 如何在 Jquery 中管理空间：HTML 类变量的 48 个函数调用（每个 96 行）

Question

我在下面展示了部分 HTML 代码。显然有两种选择——

ICMP 错误消息（8 个选项）和 ICMP 信息消息（大约 30 个选项）。

共有 48 个选项，对于每个选项，它将显示其相应的 paket 结构。

首先，看看 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 Inofrational 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");

    }

编辑2：

  ....... 
  <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     


}

对于与第一个选择相对应的选项，它的工作正常，但是当我从第二个选择选项中选择任何一个时，什么都没有发生。

score 1 · Accepted Answer

为什么要创建单独的函数？您可以简单地创建一个函数并将参数传递给它。例如：

    function myfun(myobject) {

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

在检查您的编辑后，我建议使用 onchange of select，而不是调用选项的 onclick。所以它看起来像这样。

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

score 1 · Accepted Answer

我不完全确定您要做什么，因为您的问题对您的情况非常具体...据我所知，您的页面上有多个元素，每个元素都有一个给定的类名，并且您希望避免调用 hide on所有的元素。

你可以做的是给每个元素两个类。一个是特定于每个元素的，一个是跨所有元素共享的。

可以说，我们有三个元素 Item1、Item2 和 Item3。然后你会做这样的事情：

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

只要确保你更新你的电话

score 0 · Accepted Answer

这很简单。

您可以将其压缩为四行并摆脱所有那些丑陋的内联 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 个独立的功能。让我们利用自动化来发挥我们的优势！

score 0 · Accepted Answer

不要使用onclickon <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'});

});

php - 如何在 Jquery 中管理空间：HTML 类变量的 48 个函数调用（每个 96 行）

4 回答 4

Related

Reference