CODEWITHSUNDEEP
javascriptjqueryhtmlcustom-data-attribute
itsclarke
itsclarke

Reputation: 8982

Increasing data attribute on click

What I'm attempting seems simple enough, but I'm obviously missing something. I have a simple select menu. After selecting a country, the value is passed into a variable, prepended with a hash to change it modify it to the respected id. Using this id I'm attempting to increase the data-size by 1. The only issue is that nothing happens with the data-size.

Here's a FIDDLE.

Things should flow like this:

  1. Select country
  2. Select value turned into id tag
  3. data-size of said id is increased by 1 in the HTML

EDIT/UPDATE

I need the actual data-size value to be updated in the HTML because I have specific CSS that deals with different values.

HTML

<select name="countryList" id="countryList" class="selectBox">
    <option value="" disabled selected>SELECT</option>
    <option value="austria">Austria</option>
    <option value="brazil">Brazil</option>
    <option value="canada">Canada</option>
</select>
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>

<div class="dot" data-size="0" id="austria"></div>
<div class="dot" data-size="0" id="brazil"></div>
<div class="dot" data-size="0" id="canada"></div>

jQuery

var countryPicked = "";

$('.confirm').on(touchClick, function(){
    countryPicked = $('#countryList').val();
    countryPicked = ($('#' + countryPicked));
    var i = countryPicked.data('size');
    countryPicked.data('size', i + 1);
});

Upvotes: 2

Views: 885

Answers (4)

Amit Joki
Amit Joki

Reputation: 59252

Try changing touchClick to "click"

The DOM will not be changed visibly, because it is stored internally.

use attr('data-size',i + 1) if you want the DOM to be updated

Demo

Upvotes: 3

Basti
Basti

Reputation: 130

This works for me:

Fiddle: http://jsfiddle.net/GtT3Q/13/

$('.confirm').click(function(){
   var countryPicked = $('#countryList').val();
   countryPicked = $('#' + countryPicked);
   var i = parseInt(countryPicked.attr('data-size'));
   countryPicked.attr('data-size', i + 1);
});

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

First of all please modify the handler to: 

$('.confirm').on(`click`, function(){
   //code here
});

For multiple events, give comma separated value as event.

Also note that changes will not be reflected in console. However you can check them using alert or console.log

Working Demo

jQuery stores the data internally if they don't exist the first time you set them. If you really want to force it:

countryPicked.attr('data-size', i + 1);

Upvotes: 0

Slugge
Slugge

Reputation: 180

Try doing

countryPicked.attr('data-size', i+1);

There seems to be something wrong with .data(), it can only READ the property, not SET it.

Upvotes: 0

Related Questions