javascript - 通过多数据属性隐藏与 jquery/javascript 匹配现有变量

Question

我试图隐藏一个具有两个 html 数据属性的 div，例如下面的一个具有 Engineer 和 New York 的 html 数据属性

 <div class="row" data-job-type="Engineer" data-job-location="New York"></div>
 <div class="row" data-job-type="Lockmsith" data-job-location="Maryland"></div>
 <div class="row" data-job-type="Wizard" data-job-location="New York"></div>

下面我尝试以这种方式传递它，但是当我向其中添加第二个属性时，它不起作用。

 var bar = "New York";
 var foo = "Engineer";

 $('.row[data-job-type=' + foo + ']','.row[data-job-location=' + bar + ']').hide();

Answer 1

由于属性值中包含空格，因此必须将其括在 " 或 ' 中。

此外，由于您想选择具有这两个属性的元素，因此需要按如下方式将它们组合起来

var bar = "New York";
var foo = "Engineer";

$('.row[data-job-type="' + foo + '"][data-job-location="' + bar + '"]').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" data-job-type="Engineer" data-job-location="New York">1</div>
<div class="row" data-job-type="Lockmsith" data-job-location="Maryland">2</div>
<div class="row" data-job-type="Wizard" data-job-location="New York">3</div>