javascript - 在函数中使用变量作为选择器

Question

单击时，我想获取最近的 div 的名称，然后查找具有此名称属性的所有 div 并向它们添加一个类。

这是我的代码:

HTML:

<div class="wrapper">
  <div class="container" name="button1">
    <div class="button">this is p #1</div>
  </div>
</div>

<div name="button1">
  somewhere else
</div>

JS:

$('.wrapper').on("click", '.button', function() {
   var attrname = $(this).closest('.container').attr('name');
   $("div[name=attrname]").each(function() {
     $(this).addClass("classtobeadded");
   });
});

但是它不起作用。那么，我如何在这里使用变量:

$("div[name=attrname]").each(function()

这是fiddle :

Answer 1

你的逻辑有一些问题。首先， .container 元素没有 name 属性，而 .button 有，因此您不需要使用 closest ()。其次，您需要将实际名称值连接到选择器中。最后，div 元素没有 name 属性，因此 HTML 无效。如果您想在元素上存储自定义元数据，请使用 data 属性。

另请注意，您不需要 each() 循环，只需对使用 data-name 选择的集合调用 addClass() 属性。试试这个:

$('.wrapper').on("click", '.button', function() {
  var attrname = $(this).data('name');
  $('div[data-name="' + attrname + '"]').addClass("classtobeadded");
});

.classtobeadded {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="button" data-name="button1">this is p #1</div>
  </div>
</div>

<div data-name="button1">
  somewhere else
</div>