主页 / 问题 / 1401341
Accepted
hellokitViki
Asked:2022-06-18 15:27:25 +0800 CST2022-06-18 15:27:25 +0800 CST

如果文本中有单词，则隐藏块

  • 772

有一个跨度集，每个集在属性中都有自己的文本。我想隐藏输入中没有单词的每个跨度。例如，隐藏除掀背车之外的所有东西。是否可以通过不精确的搜索（就像在 php 中一样）以某种方式选择跨度 1），2）不区分大小写

$('button').on('click', function() {
  var name = $('input').val();
  if (name !== '') {
    $('span[data-name!=' + name + ']').hide();
  } else {
    $('span').show();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-name="Audi 100">Audi 100</span><br/>
<span data-name="Audi 100 седан">Audi 100 седан</span><br/>
<span data-name="BMW">BMW</span><br/>
<span data-name="Alfa Romeo 147 хэтчбек">Alfa Romeo 147 хэтчбек</span><br/>
<span data-name="Alfa Romeo хэтчбек">Alfa Romeo хэтчбек</span><br/>

<input value="хэтчбек" />
<button>Скрыть все, кроме слова хэтчбек</button>

javascript jquery

2 个回答

  1. Best Answer

    $('button').on('click', function() {
  let name = $('input').val().toLowerCase();
  $('span').hide();
  
  $('span').each(function() {
      let dataName = $(this).data().name.toLowerCase();
      
      if (dataName.includes(name))
          $(this).show();
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-name="Audi 100">Audi 100</span><br/>
<span data-name="Audi 100 седан">Audi 100 седан</span><br/>
<span data-name="BMW">BMW</span><br/>
<span data-name="Alfa Romeo 147 хэтчбек">Alfa Romeo 147 хэтчбек</span><br/>
<span data-name="Alfa Romeo хэтчбек">Alfa Romeo хэтчбек</span><br/>

<input value="хэтчбек" />
<button>Скрыть все, кроме слова хэтчбек</button>

    • 2

  2. 首先，我们可以“反转”我们的代码——首先隐藏所有内容，然后显示我们需要的内容：

    $('button').on('click', function() {
  var name = $('input').val();
  if (name !== '') {
    $('span').hide();
    $('span[data-name*=' + name + ']').show();
  }
});

    其次，您可以使用 :not()：

    $('button').on('click', function () {
  var name = $('input').val();
  if (name !== '') {
    $('span:not([data-name*=' + name + '])').hide();
  } else {
    $('span').show();
  }
});
    • 2

相关问题