Question

我正在制作一个评级栏，其中包含具有数据评级属性的元素以及具有5个按钮的子级。如何根据数据评级属性更改按钮的背景图像？例如，如果数据评级=＆＃34; 3＆＃34; - 选择前3个按钮并更改其背景。

这是我的代码：

var rating = $('#video-list .children .branch-opened .rating');
rating.each(function() {
  var value = $(this).data('rating');
  var button = $(this).find('button');
});

HTML：

<div class="rating" data-rating="4">
<button value="1"></button>
<button value="2"></button>
<button value="3"></button>
<button value="4"></button>
<button value="5"></button>
</div>

非常感谢！

Answer 1

您可以尝试以下操作（添加到rating.each回调函数）：

for (let i = 0; i < value; ++i) {
    $(button[i]).css('background-color', '#abc');
}

编辑：必须是$(button[i])，而不仅仅是button[i]

Answer 2

如果您已经在使用jQuery，请使用.each：

var rating = $('.rating').data('rating');
$('.rating .item').slice(0,rating).each(function(index, value) {
  $(this).toggleClass('highlighted');
});

.rating {
  display: flex;
}
.item {
  flex: 1;
  padding: 10px;
  background-color: #eee;
}

.item.highlighted {
  background-color: goldenrod;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-rating="4">
  <button class="item" value="1"></button>
  <button class="item" value="2"></button>
  <button class="item" value="3"></button>
  <button class="item" value="4"></button>
  <button class="item" value="5"></button>
</div>

Answer 3

这个简单的代码适合您。

更新代码

var rating = $('.rating');
rating.each(function() {
  var rValue = $(this).data('rating');
  $(this).find('button').slice(0, rValue).addClass('black');
});

.black {
  background-color: black;
}

.rating button {
  width: 10%;
  display: inline-block;
  padding: 20px;
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-rating="4">
  <button value="1"></button>
  <button value="2"></button>
  <button value="3"></button>
  <button value="4"></button>
  <button value="5"></button>
</div>

Answer 4

存储评级值并循环浏览按钮并检查条件是否小于评级值，然后在按钮上添加高亮等级。

var ratingValue = $('.rating').data('rating');
$('.rating .item').each(function (index, value) {
    if ( index < ratingValue ) {
         $(this).toggleClass('highlighted')
    }
});

.rating {
  display: flex;
  flex-direction: column
}
.item {
  flex: 1;
  padding: 10px;
  background-color: #eee;
}

.item.highlighted {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating" data-rating="3">
  <button class="item" value="1"></button>
  <button class="item" value="2"></button>
  <button class="item" value="3"></button>
  <button class="item" value="4"></button>
  <button class="item" value="5"></button>
</div>

根据父数据属性为每个元素应用css-background

4 个答案: