CODEWITHSUNDEEP
javascript
Steve Kim
Steve Kim

Reputation: 5611

js function for multiple variables

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!

Upvotes: 2

Views: 136

Answers (3)

pygeek
pygeek

Reputation: 7414

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

Upvotes: 1

Mike Cluck
Mike Cluck

Reputation: 32531

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;

Upvotes: 3

lex82
lex82

Reputation: 11317

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;

Upvotes: 1

Related Questions