Jquery Data Attribute Value Equals

Below are my requirements.. i tried in below way. it doesnt work for me. Please let me know what is missed out. Thanks if data-block = 1, add data-rewardpoints = 300 if data-block

Solution 1:

To achieve this you need to loop over all the .ir_img_src elements individually. Right now your code is setting all the elements data() attributes based on the first element of the set.

You can also tidy the logic by holding all the values to set in an object keyed by the block. Try this:

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>

Note that it's considered better practice to use the setter of data() instead of attr(), where possible. I've left your code as-is here, as there are certain cases where you have to use attr() to set the data attribute.

Solution 2:

Do some thing like this

// 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

})

Solution 3:

try iterating over all elements

$('.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');
  }
});

Solution 4:

Your selector selects all elements that match it and not a single one, which is the expectation of the JS snippet you've provided.

I assume you want the image to be clicked and then to perform the operation in your JS snippet. Here's how you can do it:

$('.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');
    }
});

If you're just trying to initialize them then iterate over all selected elements.

$('.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');
    }
});

Solution 5:

When you just want to compare similar values, why not use switch instead of 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>