使用多个选项过滤div,但仅限于AND操作

时间:2017-09-15 09:17:49

标签: jquery

我想按选择元素过滤div,但仅限于例如当组AND字段具有值而不是OR时。目前它过滤包含组或字段选项中的值的外包。我该如何进行AND操作?

var observable = Observable.Create<string>(
    async (o, c) =>
    {
        try
        {
            var strings = new[] { "A", "B", "C" };

            foreach (var s in strings)
            {
                await Task.Delay(100);
                if (c.IsCancellationRequested)
                {
                    // exception thrown here.
                    Console.WriteLine("cancelled");
                    throw new OperationCancelledException();
                }
                o.OnNext(s);
            }
            o.OnCompleted();
        }
        catch (Exception ex)
        {
            // caught here...
            o.OnError(ex);
        }
    });

var tcs = new TaskCompletionSource<bool>();
var token = new CancellationTokenSource();
observable.Subscribe(
    str =>
    {
        Console.WriteLine(str);
        token.Cancel(); // cancel after the first iteration.
    },
    (e) =>
    {
        // why is this never called.
        Console.WriteLine($"on error :: {e.Message}");
        tcs.SetResult(true);
    },
    () =>
    {
        Console.WriteLine("on complete");
        tcs.SetResult(true);
    },
    token.Token);

// code hangs here because the subscription never completes?
await tcs.Task;
Console.WriteLine("done");
// select filter
  var item = '.item';
  $('#tagselect, #groupselect').change(function() {
    var result = $(this).map(function() {
      return '.' + this.value;
    }).get().join();
    $(item).hide().has(result).show();
  });

1 个答案:

答案 0 :(得分:1)

您每次都需要获取#tagselect#groupselect的值,并应用这两个过滤器。

如果未选择其中一个过滤器,请使用*(或者您可以将第一个选项更改为value="*",这样您就不需要在Javascript中执行此操作)。

&#13;
&#13;
// select filter
  var item = '.item';
  $('#tagselect, #groupselect').change(function() {
    var tag = $("#tagselect").val() ? "." + $("#tagselect").val() : "*";
    var group = $("#groupselect").val() ? "." + $("#groupselect").val() : "*";
    $(item).hide().has(tag).has(group).show();
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" id="groupselect">
  <option value="">group...</option>
  <option value="group11">group 11</option>
  <option value="group12">group 12</option>
  <option value="group13">group 13</option>
</select>

<select class="form-control" id="tagselect">
  <option value="">Field...</option>
  <option value="field1">field1</option>
  <option value="field2">field2</option>
  <option value="field3">field3</option>
</select>


<div class="item" style="display: block;">
<div class="item-inner">
<p class="field1"></p>
<p class="field2">field 2</p>
<p class="text">Lorem ipsum dolor sit amet</p>
<p class="group13">group 13</p>
</div>
</div>

<div class="item" style="display: block;">
<div class="item-inner">
<p class="field1">field 1</p>
<p class="text">Lorem ipsum dolor sit amet</p>
<p class="group12">group 12</p>
<p class="group11">group 11</p>
</div>
</div>

<div class="item" style="display: block;">
<div class="item-inner">
<p class="field1">field 1</p>
<p class="field3">field 3</p>
<p class="text">Lorem ipsum dolor sit amet</p>
<p class="group11">group 11</p>
</div>
</div>
&#13;
&#13;
&#13;