Performing functions if method is available in an array for jQuery

Question

I'm trying to find a better way to write a piece of jQuery but I couldn't figure it out on my own.

$('.ajaxButton').click(function(event) {

    event.preventDefault();

    var button = $(this).data('button');
    var action = $(this).data('buttonaction');
    var target = $(this).data('buttontarget');

    // The following code needs a rewrite
    if (action === 'fadeIn') {
        $(target).fadeIn();
    } else if (action === 'slideDown') {
        $(target).slideDown();      
    } else if (action === 'fadeToggle') {
        $(target).fadeToggle();     
    } else if (action === 'slideToggle') {
        $(target).slideToggle();        
    } else {
        console.log('Action not found for ' + button + ' button.');
    }


});

In order to avoid having to write the same code over and over again, I wrote the above JS for buttons I create in my web application. The above code works with the following anchor:

<a href="#" 
    class="button ajaxButton" 
    data-button="showForm"
    data-buttonaction="slideToggle"
    data-buttontarget=".showForm" >...</a>

What I have been trying to figure out is if there is a better way to write the following piece of code:

if (action === 'fadeIn') {
    $(target).fadeIn();
} else if (action === 'slideDown') {
    $(target).slideDown();      
} else if (action === 'fadeToggle') {
    $(target).fadeToggle();     
} else if (action === 'slideToggle') {
    $(target).slideToggle();        
} else {
    console.log('Action not found for ' + button + ' button.');
}

I would like to avoid the use of if: else statements. My first instinct was to have some sort of array that contains all possible actions. From there, I conduct a simple if action is in array do....

var actionArray = new Array('fadeIn', 'slideDown'...);

if ($.inArray(action, actionArray)) {
    $(target).action();
}

But I have no idea how to create the function. Can I call functions based on array values? Or can I convert strings to functions? I think the closest I could find was to use the eval() function.

Is there a better way to do this? Or will I have to use if else statements?

if ( target[ action ] ) target[ action ](); could work. But no idea how to convert it to jquery. The point is, as long as the action is the same spelling as the method name you are calling, you can use the action string to call the function in bracket notation instead of dot notation. Never use eval() unless you can exactly explain why you are using it. You could also use a switch() statement same way as inside reducers. PS: if you use an actual button instead of a hyperlink you do not have to preventDefault(). — Shilly
– Shilly, Commented May 7, 2019 at 12:37

Luuuud · Accepted Answer · 2019-05-07 12:56:59Z

1

You can target a property within an object using bracket notation (obj['prop']) instead of dot notation (obj.prop). So you can do something like this:

const validActions = ['fadeIn', 'slideDown'];

function doSomethingWithTarget(target, something) {
  if (validActions.includes(something)) {
    target[something]();
  }
}

doSomethingWithTarget($('#element'), 'slideDown'); // $('#element').slideDown();

More info: Working with objects @MDN, Property accessors @MDN

edited May 7, 2019 at 12:56

answered May 7, 2019 at 12:38

Luuuud

4,4792 gold badges27 silver badges34 bronze badges

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

2 Comments

Uzair Hayat Over a year ago

Hi, Thank you this worked well for me. However, I wasn't able to find anything on the jQuery API website regarding the Bracket Notations or why I do not need the . to call the functions. I would love to learn a little more about this.

Luuuud Over a year ago

@UzairHayat It doesn't necessarily have anything to do with jQuery, but rather with JS objects in general. A jQuery object is just a JS object with a bunch of methods/properties defined in it (like fadeIn, slideDown etc.). I've added links to MDN pages with extra info to the answer.

Jeremy Thille · Accepted Answer · 2019-05-07 12:46:25Z

0

Here's my attempt :

$('.ajaxButton').click(event => {
  event.preventDefault();

  let $this = $(this),
    button = $this.data('button'),
    action = $this.data('buttonaction'),
    $target = $($this.data('buttontarget'));

  try {
    $target[action]();
  } catch (error) {
    console.log('Action not found for ' + button + ' button.');
  }
});

target.fadeIn can also be written target["fadeIn"]. If it is a function, you can then call it the same way : target.fadeIn() or target["fadeIn"](). Then the argument can be dynamic (variable) : target[action]()

answered May 7, 2019 at 12:46

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

Comments

Mark Baijens · Accepted Answer · 2019-05-07 12:58:07Z

What you can do is check of the function excist for the target, and if so execute it.

$('.ajaxButton').click(function(event) {

  event.preventDefault();

  var button = $(this).data('button');
  var action = $(this).data('buttonaction');
  var target = $(this).data('buttontarget');

  //check if the function excist for target object
  if (typeof $(target)[action] === 'function') {
    //if so execute it.
    $(target)[action]();
  } else {
    console.log('function: ' + action + ' not found for target: ' + target);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="button ajaxButton" data-button="showForm" data-buttonaction="slideToggle" data-buttontarget=".showForm">testbutton</a>

<div class="showForm">test toggle div</div>

Collectives™ on Stack Overflow

Performing functions if method is available in an array for jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related