Jquery data attribute value equals

Question

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 = 2, add data-rewardpoints = 400
if data-block = 3, add 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');
}

Is it possible that data is stored as string. So you are comparing a string value to an integer. Try === "1" etc. — Vanquished Wombat, Dec 02 '16 at 09:49
dont use === use == cause triple equals means you are comparing everything of theirs , ie: data type, value, etc... — AzizurRahamanCA, Dec 02 '16 at 09:50
Hi.. anything is possible.. Just need to add rewardpoints based on block value. either string or integer is ok — TDG, Dec 02 '16 at 09:50
Try to alert OR console first about data block like alert($('.ir_image_holder .ir_img_src').data('block')) and see is it give you expected value — Rupal Javiya, Dec 02 '16 at 09:52

score 2 · Answer 1 · answered Dec 02 '16 at 09:57

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.

score 1 · Accepted Answer · answered Dec 02 '16 at 09:52

1

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

})

answered Dec 02 '16 at 09:52

brk

48,835
10
56
78

Thanks for your help bro!! – TDG Dec 02 '16 at 09:56

muneebShabbir · Answer 3 · 2016-12-02T09:57:02.233

0

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

edited Dec 02 '16 at 09:57

answered Dec 02 '16 at 09:54

muneebShabbir

2,500
4
29
46

you can/should always use data block with jQuery standard way as provided https://api.jquery.com/data/ here – Rupal Javiya Dec 02 '16 at 09:56

score 0 · Answer 4 · answered Dec 02 '16 at 09:58

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

score 0 · Answer 5 · answered Dec 02 '16 at 10:01

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>

Jquery data attribute value equals

5 Answers5

Linked