Question

您好我使用jQuery使用具有客户端IDS列表的HTML选项过滤页面上的元素列表。页面上的HTML元素的数据属性为finalMessage.innerHTML = result.domainresults;。我使用jquery过滤掉那些不匹配的。但是我的代码隐藏了所有元素。我的代码如下;

data-client

我的jquery如下;

<select class="form-control placeholder" id="filterSelect" name="clients">
  <option value="14">Client 14</option>
  <option value="45">Client 45</option>
  <option value="48">Client 48</option>
</select>

<div class="filterable">
  <div class="filter" data-client="14">
    <h3>Hello World</h3>
    <h4>Client 14</h4>
  </div>
  <div class="filter" data-client="45">
    <h3>Hello World</h3>
    <h4>Client 45</h4>
  </div>
  <div class="filter" data-client="48">
    <h3>Hello World</h3>
    <h4>Client 48</h4>
  </div>
  <div class="filter" data-client="14">
    <h3>Hello World</h3>
    <h4>Client 14</h4>
  </div>
  <div class="filter" data-client="48">
    <h3>Hello World</h3>
    <h4>Client 48</h4>
  </div>
</div>

我也有一个jsfiddle;

https://jsfiddle.net/to53jbe5/

希望有人可以帮我过滤出与所选值不匹配的那些。

Answer 1

使用[data-client="YOUR_VALUE"]选择具有属性的元素。 $('.filter[data-client="' + optionSelected + '"]')会将所有类别filter和属性data-client的元素选为所选值。 [Reference]

.change()最初会触发change事件来过滤所选的值元素

试试这个：

$('#filterSelect').change(function() {
  var optionSelected = $("option:selected", this).val();
  $('.filter').hide();
  $('.filter[data-client="' + optionSelected + '"]').show();
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="form-control placeholder" id="filterSelect" name="clients">
  <option value="14">Client 14</option>
  <option value="45">Client 45</option>
  <option value="48">Client 48</option>
</select>

<div class="filterable">
  <div class="filter" data-client="14">
    <h3>Hello World</h3>
    <h4>Client 14</h4>
  </div>
  <div class="filter" data-client="45">
    <h3>Hello World</h3>
    <h4>Client 45</h4>
  </div>
  <div class="filter" data-client="48">
    <h3>Hello World</h3>
    <h4>Client 48</h4>
  </div>
  <div class="filter" data-client="14">
    <h3>Hello World</h3>
    <h4>Client 14</h4>
  </div>
  <div class="filter" data-client="48">
    <h3>Hello World</h3>
    <h4>Client 48</h4>
  </div>
</div>

Fiddle here

jquery根据数据属性显示/隐藏多个元素

1 个答案: