代码之家 › 专栏 › 技术社区 › ultraloveninja

如果数据值为真,则jquery添加类

html jquery

ultraloveninja · 技术社区 · 8 年前

我试图通过检查当前类是否包含 data-value 属于 New . 但我不能百分之百确定我是不是把这个对的方式:

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

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

基本上,如果 数据值 是 新的 然后添加 new 类到 link

不确定是否正确。

1 回复 | 直到 8 年前

Rory McCrossan Hsm Sharique Hasan 8 年前

问题是因为 if 条件不具有 .link 元素,所以 this 实际上是指 window .

要解决此问题,您需要选择 链接 元素直接。试试这个:

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').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>