如果数据值为 true，则 jQuery 添加类

Question

我试图通过检查当前类是否包含 Data-value 为 New 来将类添加到 div。但我不能 100% 确定我是否以正确的方式构建它:

if ($(".link").data("value") === 'New') {
  $(this).addClass('new');
}

<div class="link" data-value="New">
  <a href="">LINK</a>
</div>

基本上，如果data-value是New，那么将new类添加到link

不确定这是否正确。

Answer 1

问题是因为 if 条件没有 .link 元素的范围，因此 this 实际上引用了 窗口。

要解决此问题，您需要直接选择 .link 元素。试试这个:

if ($(".link").data("value") === 'New') {
  $('.link').addClass('new');
}

.new {
  border: 1px solid #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link" data-value="New">
  <a href="">LINK</a>
</div>

另请注意，这仅适用于 .link 类的单个实例。如果该类有多个元素，则需要单独循环遍历每个元素。你可以这样做:

$('.link').each(function() {
  if ($(this).data("value") === 'New') {
    $(this).addClass('new');
  }
});

.new {
  background-color: #CC0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link" data-value="New">
  <a href="">LINK</a>
</div>

<div class="link">
  <a href="">LINK</a>
</div>

<div class="link" data-value="New">
  <a href="">LINK</a>
</div>