javascript 如何应用(或过滤)多级选择

hgncfbus  于 2022-12-21  发布在  Java
关注(0)|答案(3)|浏览(124)

我正在处理下面的代码片段。为什么我不能从元素中只选择womenred?正如你所看到的,我正试图从data-color="red" data-gender="women"中只获得womenred框。

$("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');
.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>
rsaldnfx

rsaldnfx1#

如果使用多属性过滤器,则只需声明元素一次。
$(“a[数据-性别=女性][数据-颜色=红色]”)
找到下面的工作溶液。

$("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>
a9wyjsp7

a9wyjsp72#

你可以这样做:

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

nwo49xxi3#

试试这个,
问题是你的选择器
$("a [数据-性别=女性],a [数据-颜色=红色]")
这是错误的,如果你想通过多个属性过滤,那么就没有必要使用"",或者重复标记它自己,只需使用多对[]而不使用","分隔。
检查this link以获取更多信息
用这个代替。

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

x一个一个一个一个x一个一个二个一个x一个一个三个一个

相关问题