如何参数化javascript函数

时间:2017-05-09 18:28:07

标签: javascript jquery html

我如何将参数传递给filterText()方法,因为我将在多个地方调用相同的方法,id是' filterText'和班级名称是'内容' ,这两个值我想作为参数传递。



function filterText() {
  var rex = new RegExp($('#filterText').val());
  if (rex == "/all/") {
    clearFilter()
  } else {
    $('.content').hide();
    $('.content').filter(function() {
      return rex.test($(this).text());
    }).show();
  }
}


function clearFilter() {
  $('.filterText').val('');
  $('.content').show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TestCase" class="table table-bordered table-striped table-condensed table-hover table-list-search">
  <thead>
    <tr name="Test Module_Header" class="danger">
      <th>
        Module Name
      </th>
      <td colspan="4">
        <strong> CashableCredits</strong>
      </td>
    </tr>

    <tr name="Test case Header" class="info">
      <th style="width: 160px">
        TestCase Name
      </th>
      <th style="width: 160px">
        Scenario Details
      </th>
      <th style="width: 110px">
        Status
        <select id='filterText' style='display:inline-block' onchange='filterText()'>
        <!--i want to parametrize this id 'filterText' -->
          <option disabled selected>Select</option>
          <option value='Passed'> Passed</option>
          <option value='Failed'> Failed</option>
          <option value='Blocked'> Blocked</option>
          <option value='all'> All</option>
        </select>
      </th>
      <th style="width: 160px">
        Start Time
      </th>
      <th style="width: 160px">
        End Time
      </th>
      <th style="width: 170px">
        Total Time Taken
      </th>
      <th style="width: 170px">
        Iteration Count
      </th>
      <th style="width: 140px">
        Exception Stack
      </th>
      <th style="width: 140px">
        Test Case IDs
      </th>
      <th style="width: 140px">
        Screenshot
      </th>
    </tr>
  </thead>
  <tbody>
    <tr name="Script Details" class="content">
    <!-- i want to parameterize this class name 'content' -->
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;redeemCashableCreditLoadedThroughCashier&#39;)">redeemCashableCreditLoadedThroughCashier</a>
      </td>
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;Verify player able to redeem the cashable credit loaded through the cashier&#39;);">View </a>
      </td>
      <td>
        <font style="color: green;"> Passed</font>
      </td>
      <td>
        25/04/17 11:55:30
      </td>
      <td>
        25/04/17 12:07:39
      </td>
      <td>
        0h :12m :9s
      </td>
      <td>
        1
      </td>
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;&#39;);">Click Here
                        </a>
      </td>
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;&#39;);">View </a>
      </td>
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;redeemCashableCreditLoadedThroughCashier_screenshot&#39;);">Click Here </a>
      </td>
    </tr>
&#13;
&#13;
&#13;

在上面的html中,我想参数化id(&#39; filterText&#39;)&amp; javascript函数的类名(&#39;内容&#39;)。

3 个答案:

答案 0 :(得分:0)

也许你可以这样试试:

function filterText(id, class)
     {  
         var rex = new RegExp(id);
         if(rex =="/all/"){clearFilter()}else{
             $('.'.class).hide();
             $('.'.class).filter(function() {
             return rex.test($(this).text());
             }).show();
     }
     }

答案 1 :(得分:0)

将参数传递给JS函数很简单:

声明函数时声明如下:

function filterText(param1, param2)
     {  
         var rex = new RegExp($(param1).val());
         if(rex =="/all/"){clearFilter()}else{
             $(param2).hide();
             $(param2).filter(function() {
             return rex.test($(this).text());
             }).show();
     }
     }

调用此函数时,请调用它:

filterText('#filterText','.content');

<强>更新

您可以将任何类型的选择器作为参数传递,它不会限制您仅传递id或仅传递类作为参数。

答案 2 :(得分:0)

好吧,如果你有一个选择

$(function(){
   // For your one select
   $('#select').change(function(){
    var ref = $(this);
    filterText(ref.val())
   });
});

如果你想要任何带有filterText类的元素可以工作:

<input type="text" class="filterText" value=""/>

function filterText(value) {
  var rex = new RegExp(value || '');
  if (rex == "/all/") {
    clearFilter()
  } else {
    $('.content').hide();
    $('.content').filter(function() {
      return rex.test($(this).text());
    }).show();
  }
}

$(function(){
    // For any filter
   $('.filtertext').change(function(){
    var ref = $(this);
    filterText(ref.val());
   });
});

内联

onchange="filterText($(this).val())"

同时编辑filterText函数以获得额外参数