javascript - Jquery 数据属性值等于

Question

以下是我的要求..我尝试了以下方式。它对我不起作用。请让我知道遗漏了什么。谢谢

1. 如果data-block = 1，添加data-rewardpoints = 300
2. 如果data-block = 2，添加data-rewardpoints = 400
3. 如果data-block = 3，添加data-rewardpoints = 500

HTML:

<div class="ir_image_holder">
  <img class="ir_img_src" src="1.jpg" data-block="1" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
  <img class="ir_img_src" src="2.jpg" data-block="2" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
  <img class="ir_img_src" src="3.jpg" data-block="3" data-rewardpoints="" />
</div>

JS:

if ($('.ir_image_holder .ir_img_src').data('block')===1) {
    $('.ir_image_holder .ir_img_src').attr('data-rewardpoints', '300');
} else if ($('.ir_image_holder .ir_img_src').data('block')===2) {
    $('.ir_image_holder .ir_img_src').attr('data-rewardpoints', '400');
} else if ($('.ir_image_holder .ir_img_src').data('block')===3) {
    $('.ir_image_holder .ir_img_src').attr('data-rewardpoints', '500');
}

Answer 1

要实现这一点，您需要单独遍历所有 .ir_img_src 元素。现在您的代码正在根据集合的第一个元素设置所有元素 data() 属性。

您还可以通过将所有要设置的值保存在由 block 键控的对象中来整理逻辑。试试这个:

var data = { 1: 300, 2: 400, 3: 500 }

$('.ir_img_src').each(function() {
  $(this).attr('data-rewardpoints', data[$(this).data('block')]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ir_image_holder">
  <img class="ir_img_src" src="1.jpg" data-block="1" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
  <img class="ir_img_src" src="2.jpg" data-block="2" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
  <img class="ir_img_src" src="3.jpg" data-block="3" data-rewardpoints="" />
</div>

请注意，在可能的情况下，使用 data() 的 setter 而不是 attr() 被认为是更好的做法。我在这里保留了您的代码，因为在某些情况下您必须使用 attr() 来设置数据属性。