jquery 根据父级的数据属性为子级添加类

8tntrjer 于 2024-01-07 发布在 jQuery

关注(0)|答案(3)|浏览(183)

我有一个简单的难度等级。因为我只知道jQuery和JavaScript的一些基础知识，我不知道我在搜索什么。我想根据parents元素的data-attribute将class active添加到item。
下面两个例子，它应该是什么样子的结束。

<div class='difficulty-wrapper' data-difficulty='1'>
  <span class='difficulty-item active'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
</div> 
<div class='difficulty-wrapper' data-difficulty='4'>
  <span class='difficulty-item active'></span>
  <span class='difficulty-item active'></span>
  <span class='difficulty-item active'></span>
  <span class='difficulty-item active'></span>
</div>

字符串

jquery

来源：https://stackoverflow.com/questions/77656554/add-class-to-children-based-on-data-attribute-of-parent

3条答案

按热度按时间

np8igboo1#

没有Jquery：

document.querySelectorAll('.difficulty-wrapper').forEach(wrapper => {
  const difficulty = wrapper.dataset.difficulty || 0;
  const items = [...wrapper.querySelectorAll('.difficulty-item')].slice(0, difficulty);
  items.forEach(item => item.classList.add('active'));
})

.difficulty-wrapper {
  display: flex;
  gap: 2px;
}
.difficulty-wrapper:not(:last-child) {
  margin-bottom: 2px;
}
.difficulty-item {
  width: 48px;
  height: 32px;
  border-radius: 2px;
  background-color: yellow;
  border: solid 1px red;
}
.difficulty-item.active {
  background-color: blue;
}

<div class="difficulty-wrapper" data-difficulty="1">
  <span class="difficulty-item"></span>
  <span class="difficulty-item"></span>
  <span class="difficulty-item"></span>
  <span class="difficulty-item"></span>
</div> 
<div class="difficulty-wrapper" data-difficulty="4">
  <span class="difficulty-item"></span>
  <span class="difficulty-item"></span>
  <span class="difficulty-item"></span>
  <span class="difficulty-item"></span>
</div>

展开查看全部

赞(0）回复(0）举报 2024-01-07

w8rqjzmb2#

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Difficulty Scale</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    .difficulty-item {
      /* Add your styling for difficulty items here */
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #ccc;
      margin: 2px;
    }
    .active {
      /* Add your styling for active difficulty items here */
      background-color: #00f; /* Change the background color for active items */
    }
  </style>
</head>
<body>
<div class='difficulty-wrapper' data-difficulty='1'>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
</div> 
<div class='difficulty-wrapper' data-difficulty='4'>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
  <span class='difficulty-item'></span>
</div>
<script>
  $(document).ready(function() {
    // Iterate through each difficulty-wrapper
    $('.difficulty-wrapper').each(function() {
      // Get the data-difficulty attribute value
      var difficulty = $(this).data('difficulty');
      
      // Find the corresponding difficulty-item elements and add the "active" class to them
      $(this).find('.difficulty-item:lt(' + difficulty + ')').addClass('active');
    });
  });
</script>
</body>
</html>

字符串
此脚本使用jQuery遍历每个.difficulty-wrapper元素，检索data-difficulty值，并将“active”类添加到该 Package 器中相应数量的.difficulty-item元素中。：lt（）选择器用于选择索引小于指定值（在本例中为难度级别）的元素。

展开查看全部

赞(0）回复(0）举报 2024-01-07

41ik7eoe3#

您可能根本不需要实际添加类。您可以直接根据属性选择子div，并从那里设置元素的样式。
下面是一个针对difficulty="4"元素集的示例：

.difficulty-wrapper[data-difficulty="4"] > span.difficulty-item {
  font-weight: 800;
  color: #C00;
}

个字符

赞(0）回复(0）举报 2024-01-07

我来回答

jquery 根据父级的数据属性为子级添加类

3条答案

相关问题

热门标签

最新问答