CODEWITHSUNDEEP
javascriptjqueryhtml
Pedro
Pedro

Reputation: 3

How can I get a specific variable reading the data atribute on element?

I have some fields on my site, and they are the same, but each one of then should update some jquery variable with it's value.

<input data-atribute="for"></input>
<input data-atribute="int"></input>
<input data-atribute="agi"></input>

I need that depending on the data-atribute, they run the same function, but update the variable pointed in the atribute.

Example:

for = "0";
int = "0";
agi = "0";

$( "input" ).focusout(function() {
    data-atribute-of-the-element = $(this).val;
})

I have no know idea how to do this. And seems stupid to create a different function for every input.

Thanks in advance!

Upvotes: 0

Views: 45

Answers (4)

Daniel Beck
Daniel Beck

Reputation: 21485

.attr() does work, but since you're using data attributes anyway, you may as well use the .data() function designed for them.

See comments in the code snippet for explanation:

/* Set up an object to contain the values you're capturing.
   This means we won't have to predefine all the variables or 
   set them individually; it also means you can use reserved words 
   like "for", which wouldn't work as variables on their own: */
var capturedValues = {};

$( "input" ).focusout(function() {

  // This gets the contents of the "data-atribute" attribute:
  var theName = $(this).data("atribute");

  // This captures the value of the current input field,
  // and puts it in the capturedValues object using theName as the key:
  capturedValues[theName] = $(this).val();
  // Later on you can reference these as e.g. capturedValues.agi
  
  // Show the results (just for demo):
  console.log(capturedValues);

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-atribute="for"></input>
<input data-atribute="int"></input>
<input data-atribute="agi"></input>

Upvotes: 1

Kickass
Kickass

Reputation: 1134

How about:

var for = "0";
var int = "0";
var agi = "0";

$( "input" ).focusout(function(s) {
  switch ($(this).attr('data-attribute')) {
    case 'for':
      for = $(this).val();
      break;
    case 'int':
      int = $(this).val();
      break;
    case 'agi':
      agi = $(this).val();
      break;
  }

  //OR
  var t = $(this).attr('data-attribute');
  if (t == 'for') for = $(this).val();
  else if (t == 'int') int = $(this).val();
  else if (t == 'agi') agi = $(this).val();
})

PS: 'atribute' has 2 t's : attribute

Upvotes: 0

yajiv
yajiv

Reputation: 2941

Create an object which has a field which is your variable. Something like below.

var a={'for':'0','int':'0','agi':'0'}

$( "input" ).focusout(function() {
    a[$(this).attr('data-atribute')] = $(this).val();
    console.log(a.for);
    console.log(a.int);
    console.log(a.agi);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-atribute="for"></input>
<input data-atribute="int"></input>
<input data-atribute="agi"></input>

Upvotes: 1

Nicola Silvan Buehler
Nicola Silvan Buehler

Reputation: 97

Use the .attr function of jQuery:

$( "input" ).focusout(function() {
    let data-atribute-of-the-element = $(this).attr('data-atribute');
})

Upvotes: 0

Related Questions