关于应用（过滤）多级选择的问题

时间：2018-05-31 05:15:24

标签： javascript jquery

您能否请看一下这段代码，让我知道为什么我无法从元素中选择仅 women和red？你可以看到我只想让女性and红色boxes from the数据颜色=＆＃34;红色＆＃34;数据性别=＆＃34;妇女＆＃34;`

  

$（＆＃34; a [data-gender = women]，[data-color = red]＆＃34;）

＆＃13;
＆＃13; 
$("a").each(function() {
  $(this).css('background', $(this).data("color"));
  $(this).text($(this).data("gender"))
});
 $("a[data-gender=women],a[data-color=red] ").removeClass('zoomOut').addClass('zoomIn');
＆＃13; 
.zoomOut{
display:none;


}
.zoomIn{
display:cell;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="s" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="yellow" data-size="s" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="black" data-size="s" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="l" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="khaki" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="s" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="s" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="grey" data-size="l" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

你可以这样做：

$("a").each(function() {
  if(this.attr('data-color') == 'red' && this.attr('data-gender') == 'women')
  {
    this.removeClass('zoomOut').addClass('zoomIn');
  }
});

答案 1 :(得分：0)

如果您使用多个属性过滤器，则只需要声明该元素一次。

  

$（ “一个[数据性别=妇女] [数据色=红色]”）

找到下面的工作解决方案。

$("a").each(function() {
  $(this).css('background', $(this).data("color"));
  $(this).text($(this).data("gender"))
});
 $("a[data-gender=women][data-color=red] ").removeClass('zoomOut').addClass('zoomIn');
.zoomOut{
display:none;


}
.zoomIn{
display:cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="s" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="yellow" data-size="s" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="black" data-size="s" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="l" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="khaki" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="s" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="s" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="grey" data-size="l" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>

答案 2 :(得分：0)

试试这个，

问题是你的选择器

  

$（“a [data-gender = women]，[data-color = red]”）

这是错误的，如果你想通过多个属性进行过滤，那么就不需要使用“，”或重复标记它只需使用多对[]而不是“，”分开。

检查this link了解更多信息

替换为此。

 $("a[data-gender='women'][data-color='red']")


$("a").each(function() {
  $(this).css('background', $(this).data("color"));
  $(this).text($(this).data("gender"))
});

$("a[data-gender='women'][data-color='red']").removeClass('zoomOut').addClass('zoomIn');
.zoomOut{
  display:none;
}
.zoomIn{
  display:cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="s" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="yellow" data-size="s" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="black" data-size="s" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="l" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="khaki" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="green" data-size="l" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="s" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="s" data-gender="men"></a>
<a role="button" class="btn btn-default zoomOut" data-color="grey" data-size="l" data-gender="bi"></a>
<a role="button" class="btn btn-default zoomOut" data-color="blue" data-size="m" data-gender="women"></a>
<a role="button" class="btn btn-default zoomOut" data-color="red" data-size="m" data-gender="men"></a>

相关问题
最新问题