js function for multiple variables

Question

So, I have two js variables that i use a lot:

var rhpp = jQuery(this).parents('.rhp');
var rhp_id = rhpp.data("pi");

For example:

function my_function_1 (){
   jQuery(document).on('click', '.button_1', function (e) {
      var rhpp_1= jQuery(this).parents('.rhp');
      var rhp_id_1 = rhpp_1.data("pi");   
      //do something
   });
}
function my_function_2 (){
   jQuery(document).on('click', '.button_2', function (e) {
      var rhpp_2 = jQuery(this).parents('.rhp');
      var rhp_id_2 = rhpp_2.data("pi");   
      //do something
   });
}
function my_function_3 (){
   jQuery(document).on('click', '.button_3', function (e) {
      var rhpp_3 = jQuery(this).parents('.rhp');
      var rhp_id_3 = rhpp_3.data("pi");   
      //do something
   });
}

Because of it, i want to make this into a function that I can reuse:

function RHP_PARENT(a, b) {
    var a = jQuery(this).parents('.rhp');
    var b = a.data("pi");
}

Then, RHP_PARENT("rhpp", "rhp_id");

of course, it is not right. I am not too familiar with how to make a function for variables.

Could someone show me?

Thanks!

Could you elaborate what you're using this function for? What do you mean by "function for variables"? — sg.cc
– sg.cc, Commented Jan 27, 2016 at 21:38
The keyword this is scoped to the function. It might be helpful to create a jsbin of the working code so we can see the intent. — styfle
– styfle, Commented Jan 27, 2016 at 21:39
Sorry for the confusion. I added three functions to elaborate it more. Bottom line is that, I want to make these two variable as a function so I don't need to repeat it every single function. — Steve Kim
– Steve Kim, Commented Jan 27, 2016 at 21:41

Mike Cluck · Accepted Answer · 2016-01-27 21:48:36Z

3

You could create a function which returns both of those values.

function getRhpParent(element) {
  var rhpp = jQuery(element).parents('.rhp');
  return {
    rhpp: rhpp,
    rhpp_id: rhpp.data("pi")
  };
}

// Usage
var temp = getRhpParent(this);
var rhpp = temp.rhpp;
var rhp_id = temp.rhp_id;

edited Jan 27, 2016 at 21:48

answered Jan 27, 2016 at 21:45

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steve Kim Over a year ago

This is something I didn't think about. Thanks for the help! =)

lex82 Over a year ago

Looks a bit buggy. Pass jQuery(this), not this. and then use the element parameter in the function...

lex82 · Accepted Answer · 2016-01-27 21:45:28Z

1

You could do something like this:

function RHP_PARENT(that) {
    var a = jQuery(that).parents('.rhp');
    var b = a.data("pi");
    return { parents: a, data: b };
}

This allows you to write:

var rhp_id_1 = RHP_PARENT(this).data;

answered Jan 27, 2016 at 21:45

lex82

11.4k2 gold badges48 silver badges72 bronze badges

1 Comment

Steve Kim Over a year ago

Thank you! Learned something new =)

pygeek · Accepted Answer · 2016-01-27 22:12:56Z

Do you intend to access those variables outside of RHP_PARENT?

If so you should instantiate a and b outside of the function.

Do you intend to access a and b as properties of RHP_PARENT?

In which case, you may want to do the following:

var RHP_PARENT = {
  'a': (function(){
    jQuery(this).parents('.rhp');
  })(),
  'b': (function(){
    this.a.data("pi");
  })()
}

It's not entirely clear based on your question what your use case is, so it's difficult to formulate a single answer.

EDIT:

It seems like you updated your question, here are two viable solutions to your problem.

The following code will loop over all elements which have classes that begin with "button". This solves for the homogenous use case:

$("[class^='button']").each(function(){
   $(this).click(function (e) {
        var rhpp = jQuery(this).parents('.rhp');
        var rhp_id = rhpp.data("pi");   
        //do something
    });
})

The following solution solves for a more general use case and is a bit more flexible. The advantage here is that the business logic for getting rhhp and rhp_id is broken out into helper functions, allowing it to be more reusable. You may also reference other functions within the same object by using this:

var my_functions = {
  get_rhhp: function(el){
     return jQuery(el).parents('.rhp');
  },
  get_rhp_id: function(rhhp){
     return rhhp.data("pi");   
  },
  "my_function_1": function(){
    jQuery(document).on('click', '.button_1', function (e) {
        var rhhp =  get_rhhp();
        var rhp_id = get_rhp_id(rhhp);
        //do something
    });
  },
  "my_function_2": function(){
    jQuery(document).on('click', '.button_2', function (e) {
        var rhhp =  get_rhhp();
        var rhp_id = get_rhp_id(rhhp);
        //do something
    });
  },
  "my_function_3": function(){
    jQuery(document).on('click', '.button_3', function (e) {
        var rhhp =  get_rhhp();
        var rhp_id = get_rhp_id(rhhp);
        //do something
    });
  }
}

Collectives™ on Stack Overflow

js function for multiple variables

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related