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
– Vanquished Wombat, Commented Dec 2, 2016 at 9:49
dont use === use == cause triple equals means you are comparing everything of theirs , ie: data type, value, etc... — AzizurRahamanCA
– AzizurRahamanCA, Commented Dec 2, 2016 at 9:50
Hi.. anything is possible.. Just need to add rewardpoints based on block value. either string or integer is ok — TDG
– TDG, Commented Dec 2, 2016 at 9: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
– Rupal Javiya, Commented Dec 2, 2016 at 9:52

Rory McCrossan · Accepted Answer · 2016-12-02 09:57:06Z

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.

brk · Accepted Answer · 2016-12-02 09:52:38Z

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 2, 2016 at 9:52

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

TDG Over a year ago

Thanks for your help bro!!

muneebShabbir · Accepted Answer · 2016-12-02 09:57:02Z

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 2, 2016 at 9:57

answered Dec 2, 2016 at 9:54

muneebShabbir

2,5384 gold badges30 silver badges49 bronze badges

1 Comment

Rupal Javiya Over a year ago

you can/should always use data block with jQuery standard way as provided api.jquery.com/data here

Konstantin Dinev · Accepted Answer · 2016-12-02 09:58:38Z

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

mrid · Accepted Answer · 2016-12-02 10:01:08Z

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>

Collectives™ on Stack Overflow

Jquery data attribute value equals

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related