Question

我需要使用.max-kwota内的类td >span过滤多个表。

现在，当我执行console.log(v);时，我一次收到所有值。所以问题是，如果我需要将var v与输入值进行比较，该如何配置。{p>

$('input[name="test"]').on('change', function(a, b) {
  var value = this.value;
  $('table >tbody').hide();
  if (value == 'All') {
    $('table >tbody').show();
  }
  if (value == 'Under 3000') {
    $('table >tbody').filter(function(a, b) {
      var v = $('.max-kwota').text();
      console.log(v);
      return 3000 > v;
    }).show();
  }
  if (value == 'Under 10000') {
    $('table >tbody').filter(function(a, b) {
      var v = $('.max-kwota').text();
      return 10000 > v;
    }).show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="Under 3000" name="test"><label> Under 3000</label>
<input type="radio" value="Under 10000" name="test"><label>Under 10000</label>



<table>
  <tbody>
    <tr>
      <td><span class="max-kwota">500</span></td>
      <td>test</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td><span class="max-kwota">4000</span></td>
      <td>test2</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td><span class="max-kwota">11000</span></td>
      <td>test3</td>
    </tr>
  </tbody>
</table>

Answer 1

您的问题来自以下事实：您在过滤器回调函数中选择类为max-kwota的 all 个元素。您要选择包含在特定tbody元素中的元素。为此，您可以为选择器提供上下文，即通过在第二个参数中提供this：

var v = $('.max-kwota', this).text();

同时，.text()方法返回节点的textContent，即它将为typeof string。您需要先将其转换为数字：这可以通过使用一元运算符+完成，即：

var v = +$('.max-kwota', this).text();

请注意，但是，只有在每个{strong>每个 .max-kwota元素中有一个<tbody>元素时，此方法才有效。

$('input[name="test"]').on('change', function(a, b) {
  var value = this.value;
  $('table  >tbody').hide();
  if (value === 'All') {
    $('table > tbody').show();
  }
  if (value === 'Under 3000') {
    $('table > tbody').filter(function(a, b) {
      var v = +$('.max-kwota', this).text();
      return 3000 > v;
    }).show();
  }
  if (value === 'Under 10000') {
    $('table > tbody').filter(function(a, b) {
      var v = +$('.max-kwota', this).text();
      return 10000 > v;
    }).show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="All" checked name="test"><label>All</label>
<input type="radio" value="Under 3000" name="test"><label> Under 3000</label>
<input type="radio" value="Under 10000" name="test"><label>Under 10000</label>



<table>
  <tbody>
    <tr>
      <td><span class="max-kwota">500</span></td>
      <td>test</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td><span class="max-kwota">4000</span></td>
      <td>test2</td>
    </tr>
  </tbody>
</table>
<table>
  <tbody>
    <tr>
      <td><span class="max-kwota">11000</span></td>
      <td>test3</td>
    </tr>
  </tbody>
</table>

Answer 2

您需要切换整个表格的显示。

$('input[name="test"]').on('change', function(a, b) {
  var value = this.value;
  if (value == 'All') {
    $(".max-kwota").parents('table').show();
  }
  if (value == 'Under 3000') {
        $(".max-kwota").filter(function() {
           return !($(this).text() > 3000);
        }).parents('table').hide();
  }
  if (value == 'Under 10000') {
        $(".max-kwota").filter(function() {
           return !($(this).text() > 10000);
        }).parents('table').hide();
  }
});

如何显示表格在“ td”中按类对其进行过滤？

2 个答案: