Question

我正在尝试动态过滤已被标记为＆＃39;的成员列表。使用菜单的扇区和包含标签的数据属性（成员）。

http://jsfiddle.net/richardblyth/yp8q3ewh/

我遇到的问题是实际的jQuery本身 - 因为数据成员是一个逗号分隔的列表，它似乎没有选择。

$("#js-select-sector").bind("change", function() {

  console.log((this.value));

  //Show divs with data-attr which contain the selected value
  $("div.member-small[data-membersectors*='(" + this.value + ")']").show();

  //Hide those with data-attr which do not contain the selected value
  $("div.member-small:not([data-membersectors*='(" + this.value + ")'])").hide();

});

当用户从菜单中选择一个扇区时，它应该隐藏所有不包含该扇区的扇区（在他们的数据成员中）

非常感谢任何正确方向的指示，谢谢。

Answer 1

为什么围绕this.value的括号？此代码有效：

$("#js-select-sector").bind("change", function() {
    //Show divs with data-attr which contain the selected value
    $("div.member-small[data-membersectors*='" + this.value + "']").show();

    //Hide those with data-attr which do not contain the selected value
    $("div.member-small:not([data-membersectors*='" + this.value + "'])").hide();
});

Answer 2

您不需要选择器中属性值的括号：

$("#js-select-sector").bind("change", function() {
    $("div.member-small").hide();
    $("div.member-small[data-membersectors*='" + this.value + "']").show();
});

Updated fiddle

Answer 3

或者......你可以使用.filter（），如：

$("#js-select-sector").bind("change", function() {
  var val = this.value;
  $("div.member-small").filter(function() {
    $(this).attr("data-membersectors").indexOf(val) != -1 ? $(this).show() : $(this).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Select</h1>

<select id="js-select-sector">
  <option selected="selected">Select a sector</option>
  <option value="sector1">Sector 1</option>
  <option value="sector2">Sector 2</option>
  <option value="sector3">Sector 3</option>
</select>

<h2>Results</h2>

<div class="member-small" data-membersectors="sector1">Member A</div>
<div class="member-small" data-membersectors="sector2, sector3">Member B</div>
<div class="member-small" data-membersectors="sector1, sector3">Member C</div>
<div class="member-small" data-membersectors="sector3">Member D</div>

http://jsfiddle.net/wc1k82hw/

从data-attr中的逗号分隔列表中进行选择

3 个答案: