Question

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

如果data-block = 1，则添加data-rewardpoints = 300
如果data-block = 2，则添加data-rewardpoints = 400
如果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()而不是attr()的setter。我已将代码保留为原样，因为在某些情况下您必须使用attr()来设置数据属性。

Answer 2

做这样的事情

// Get all matched element
var elem = $('.ir_image_holder .ir_img_src');
// loop through each o fthem to get the data-block value
 $(elem).each(function(e,v){
 if($(this).data('block')===1){
    // assign the data-reward point here
    $(this).attr('data-rewardpoints',300);
 }
// rest of code

})

Answer 3

尝试迭代所有元素

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

Answer 4

您的选择器会选择与其匹配的所有元素而不是单个元素，这是您提供的JS代码段的期望。

我假设你想要点击图像，然后在你的JS片段中执行操作。这是你如何做到的：

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

如果您只是尝试初始化它们，那么迭代所有选定的元素。

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

Answer 5

如果您只想比较相似的值，为什么不使用switch代替if

$('.ir_img_src').each(function(e,v){
    var me = $(this);
    var db = parseInt($(this).attr('data-block'));
  
     switch(db)
     {
         case 1 : me.attr('data-rewardpoints', '300');
                  break;
         
         case 2 : me.attr('data-rewardpoints', '400');
                  break;
         
         case 3 : me.attr('data-rewardpoints', '500');
                  break;
     }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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>

Jquery数据属性值等于

5 个答案: