Question

我正在用jquery编写一个多过滤器模块，我在骨架中缺少一些逻辑。

我有多个带有data-x和data-y属性的div

例如

<div class="divClass" data-x = "1" data-y="2">1</div>
<div class="divClass" data-x = "2" data-y="3">2</div>
<div class="divClass" data-x = "3" data-y="2">3</div>
<div class="divClass" data-x = "4" data-y="1">4</div>

结果：

当我从selectox中选择y属性2和3时，当我从selectbox 1中选择x属性时

我的查询必须是x = 1且y = 2或3

所以它应该给我结果

数据为y 2或3且data-x = 1

的产品

必须带产品1和产品2

Here is my Fiddle

$('[data-x="1"],[data-y="2"],[data-y="3"]').each(function(){
    $("#result").append($(this).text() + ",");
});

这给了我所有的产品，我的问题是如何用选择器编写我的查询然后我将能够应用jquery过滤器

Answer 1

传真((x == 1) && ((y == 2) || y == 3)))：

$(function(){
  // One method:
  $('[data-x="1"][data-y="2"],[data-x="1"][data-y="3"]').css('color','red');
  
  // IMHO, more concise:
  $('[data-x="1"]').find('[data-y="2"],[data-y="3"]').css('font-weight', '800');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="divClass" data-x="1" data-y="1">1-1</div>
<div class="divClass" data-x="1" data-y="2">1-2</div>
<div class="divClass" data-x="1" data-y="3">1-3</div>
<div class="divClass" data-x="2" data-y="1">2-1</div>
<div class="divClass" data-x="2" data-y="2">2-2</div>
<div class="divClass" data-x="2" data-y="3">2-3</div>
<div class="divClass" data-x="3" data-y="1">3-1</div>
<div class="divClass" data-x="3" data-y="2">3-2</div>
<div class="divClass" data-x="3" data-y="3">3-3</div>

（虽然，从你的问题来看，你期待两场比赛。我只看到你提供的代码。并且，为了证明比赛，我添加了9种x / y值变体）

而且，如果你想要的更清洁一点：

(function($){
  // helper: return jQuery selector based on supplied attribute name.
  var _mapToAttr = function(attr){
    return function(v){ return '[' + attr + '="' + v + '"]'; };
  }
  
  // polyfill: Array.prototype.map
  if (!Array.prototype.map){
    Array.prototype.map = function(func){
      if (this.length == 0) return [];
      var result = [];
      for (var i = 0; i < this.length; i++){
        result.push(func(this[i]));
      }
      return result;
    };
  }
  
  // $.XY(x,y)
  //
  // Params:
  //   @x   = single value or an array of possible values
  //   @y   = single value or an array of possible values
  //
  // Usage:
  //   $.XY(1,2)
  //     Find all elements with an x value of 1 and a y
  //     value of 2.
  //   $.XY(2,[3,4])
  //     Find all elements with an x value of 2 and a y
  //     value of either 3 or 4.
  $.XY = function(x,y){
    // validation: confirm x and y are defined
    if (typeof x === 'undefined' || typeof y === 'undefined') return $([]);
    
    // normalize both values to arrays
    if (!$.isArray(x)) x = [ x ];
    if (!$.isArray(y)) y = [ y ];
    
    // validation: confirm x and y aren't empty sets
    if (!x.length || !y.length) return $([]);
    
    // create jQuery selectors from values
    var xSel = x.map(_mapToAttr('data-x')).join(','),
        ySel = y.map(_mapToAttr('data-y')).join(',');
    
    // return matching sets
    // if a third paramter was supplied, it came from our $.fn.XY()
    // call, therefore use it as an initial context to search within.
    // otherwise, search the entire document for matches.
    var set = arguments.length == 3
      ? $(arguments[2]).filter(xSel).filter(ySel)
      : $(xSel).filter(ySel);
    console.log(set);
    return set;
  };
  
  // $().XY(x,y)
  //
  // Params:
  //   @x = single value or an array of possible values
  //   @y = single value or an array of possible values
  //
  // Usage:
  //   $('.foo').XY(1,2)
  //     Find all elements with the class foo who also
  //      have an X value of 1 and a y value of 2.
  //   $('div').XY([1,2],[3,4])
  //      Find all divs with an x value of either 1 or 2
  //       and a y value of either 3 or 4.
  $.fn.XY = function(x,y){
    // perform above search, but supply an initial context.
    return $.XY(x,y,this);
  };
})(jQuery);

$.XY(1,[2,3]).css('color','red');
$('.divClass').XY(2,[1,3]).css('color','green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="divClass" data-x="1" data-y="1">1-1</div>
<div class="divClass" data-x="1" data-y="2">1-2</div>
<div class="divClass" data-x="1" data-y="3">1-3</div>
<div class="divClass" data-x="2" data-y="1">2-1</div>
<div class="divClass" data-x="2" data-y="2">2-2</div>
<div class="divClass" data-x="2" data-y="3">2-3</div>
<div class="divClass" data-x="3" data-y="1">3-1</div>
<div class="divClass" data-x="3" data-y="2">3-2</div>
<div class="divClass" data-x="3" data-y="3">3-3</div>

多个过滤器选择器查询

1 个答案: