How to pass multiple variables from function to multiple jquery attr

Question

This question is related to:
How to pass multiple variables from funtion to jquery attr

So the link above shows multiple solutions on how to pass multiple variables from a regular JavaScript function into multiple jQuery .attr() function values. But the question is, what if you want to send those variables to more than one jQuery functions?

That might sound strange as a statement, that's why I'll include an example.

$(function() {

  function definingVars() {
    var ValueOne = "Sucess with the value on input 1";
    var IdOne = successWithTheId1;
    var ClassOne = sucessWithTheClass1;
    var ValueTwo = "Sucess with the value on input 2";
    var IdTwo = successWithTheId2;
    var ClassTwo = sucessWithTheClass2;
    return [ValueOne, IdOne, ClassOne, ValueTwo, IdTwo, ClassTwo];
  }

  $("div:nth-child(1)").attr({
    //  var df = definingVars();  Incorrect syntax!!!
    value: df.ValueOne,
    id: df.IdOne,
    class: df.ClassOne
  })

  $("div:nth-child(2)").attr({
    //  var df = definingVars();  Incorrect syntax!!!
    value: df.ValueTwo,
    id: df.IdTwo,
    class: df.ClassTwo
  })

});

input {
  width: 20em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="noSucessWithTheId1" class="noSucessWithTheClass1" value="No sucess with the value on input 1">
  <input type="text" id="noSucessWithTheId2" class="noSucessWithTheClass2" value="No sucess with the value on input 2">
</div>

Please don't ask about context. This is a dummy example.

$(function() {

  function definingVars() {
    var Value = "Sucess with the value";
    var Id = successWithTheId;
    var Class = sucessWithTheClass;

    return {
      value: Value,
      id: Id,
      class: Class
    };
  }

  $("input").attr(definingVars())

});

This is one of the answers posted in the question related to this one. It looks beautiful, but it looks impossible to apply this same concept to the situation stated at the beginning of this question.

Add the statement before setting attributes `var df = definingVars(); $("div:nth-child(1)").attr({` — Tushar, Nov 02 '15 at 03:34
What probem with this previous question asked http://stackoverflow.com/questions/33470008/how-to-pass-multiple-variables-from-funtion-to-jquery-attr/33470070#33470070 — Norlihazmey Ghazali, Nov 02 '15 at 03:35
Im sorry about the confusion, I have edited the question for better understanding. — Julian Avar, Nov 02 '15 at 05:38
It seems like you want to return a different set of attributes from the function based on an (to us) unknown condition. In that case you probably want to make the function accept a parameter from which it decides upon the return value. Given the example alone, it doesn't seem to make sense to have a single function return two different things. Or you could let the function return an *array* of attributes. — Felix Kling, Nov 02 '15 at 05:43

yeahman · Accepted Answer · 2015-11-02T06:13:52.087

Not sure if that is what you want to do.

You missed the quotes on some string
I stored the attributes in an array
You should be targetting the input not the div

$(function() {
    function definingVars() {
    var ValueOne = "Sucess with the value on input 1";
    var IdOne = "successWithTheId1";
    var ClassOne = "sucessWithTheClass1";
    var ValueTwo = "Sucess with the value on input 2";
    var IdTwo = "successWithTheId2";
    var ClassTwo = "sucessWithTheClass2";
    return [{value:ValueOne, id:IdOne, class:ClassOne}, {value:ValueTwo, id:IdTwo, class:ClassTwo}];
  }
  
  var df = definingVars();
  $("input:nth-child(1)").attr(df[0]);
  $("input:nth-child(2)").attr(df[1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="noSucessWithTheId1" class="noSucessWithTheClass1" value="No sucess with the value on input 1">
  <input type="text" id="noSucessWithTheId2" class="noSucessWithTheClass2" value="No sucess with the value on input 2">
</div>

score 1 · Answer 2 · answered Nov 02 '15 at 06:17

Changed the selector and returning an object instead of an array to simplify variables.

You can invoke the function and access the object property using the required key.

$(function() {

  function definingVars() {
  console.log("invoked definingVars");
    return {
      ValueOne: "Sucess with the value on input 1",
      IdOne: "successWithTheId1",
      ClassOne: "sucessWithTheClass",
      ValueTwo: "Sucess with the value on input 2",
      IdTwo: "successWithTheId2",
      ClassTwo: "sucessWithTheClass2"
    };
  };


  $($("div>input")[0]).attr({

    value: definingVars()["ValueOne"],
    id: definingVars()["IdOne"],
    class: definingVars()["ClassOne"]
  });

  $($("div>input")[1]).attr({
    value: definingVars()["ValueTwo"],
    id: definingVars()["IdTwo"],
    class: definingVars()["ClassTwo"]
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="noSucessWithTheId1" class="noSucessWithTheClass1" value="No sucess with the value on input 1">
  <input type="text" id="noSucessWithTheId2" class="noSucessWithTheClass2" value="No sucess with the value on input 2">
</div>

How to pass multiple variables from function to multiple jquery attr

2 Answers2