How to call function dynamically in JQuery

Question

I've set of html codes, I want to have a function for each set where I can pull some data or do some activities, so basically I need to be calling function according to the html codes present in DOM, suppose I've header section I want to collect menu items and I've sliders where I want to collect slider information, So I need to call header function to do the activity accordingly and slider function to do the activity, I went across some info about eval() but I guess it has lot of demerits and is being obsolete. Please suggest me how can I achieve it.

HTML Code: Header

<div class="header" data-nitsid="1">
 <div class="branding">
 <h1 class="logo">
 <a href="index.html"><img src="images/[email protected]" alt="" width="25" height="26">NitsOnline</a>
 </h1>
 </div>
 <nav id="nav">
 <ul class="header-top-nav">
 <li class="has-children">
 <a href="index.html">Home</a>
 </li>
 </ul>
 </nav>
</div>

Slider

<div id="slideshow" data-nitsid="2">
 <div class="revolution-slider">
 <ul> <!-- SLIDE -->
 <!-- Slide1 -->
 <li data-transition="zoomin" data-slotamount="7" data-masterspeed="1500">
 <!-- MAIN IMAGE -->
 <img src="http://placehold.it/1920x1200" alt="">
 </li>
 </ul>
 </div>
</div>

Now I want to collect data from both elements and pass the data to my views of laravel framework where it will generate a popup for each section for editing purpose.

$('.page-content-wrapper').find('[data-nitsid]').each(function() {
 // getting data to call function
 var nits = $(this).data("nitsid");
 // calling function
 design.nits();
}
var design = {};
design.1 = function() {
 // do ajax request to views of header
}
design.2 = function() {
 // do ajax request to views of slider
}

• Akshay: you can pass onclick to the html to get certain parameters and define that into js..not sure what does you want exactly
• Nitish Kumar: @akshaypadwal I don't want onclick method, I'm trying to build popups for respective section present in DOM
• eisbehr: I think you mean design[nits]();, do you?
• user6586783: @NitishKumar. It is very unclear what you are asking. Can you give an example of data you want to process?
• Nitish Kumar: @eisbehr: yes I want it like same, but how can I call it, I mean whats is best way to execute this.

Answer 1

You canot use literal number as a property name. If you want to call property 1 of object design use design[1] instead. Also, you cannot assing property to non-initialized variable, you must use var design = {}; to make it object. If your property of design object is stored in nits variable, then call it as design[nits]();. Also, next time don't forget to test your code before posting it here. You've forget ) after your first function.

$('.page-content-wrapper').find('[data-nitsid]').each(function() {
 // getting data to call function
 var nits = $(this).data("nitsid");
 // calling function
 design[nits]();
});
var design = {};
design[1] = function() {
 // do ajax request to views of header
};
design[2] = function() {
 // do ajax request to views of slider
};

• eisbehr: If using numerical index maybe better use an array instead of an object in your declaration of design. It would be more consistent ...
• user6586783: @eisbehr. I think it is better to use object, because only design[1] and design[2] have numeral indexes. As you can see from code, nits variable is always string, so I assume that OP want to add string indexes to design variable. Also, if you read edit history of the question, you wil find that design[1] was design.header and design[2] was design.slider.

Answer 2

You want to use design[nits]();.
This will get the property nits of design and execute it with ().

But there is another problem. Your design will be declared after the each loop, so it is not available inside. You have to place it before.

$(function() {
 var design = {};
 design.funcOne = function() {
 alert("funcOne called");
 }
 design.funcTwo = function() {
 alert("funcTwo called");
 }
 $('div[data-nitsid]').each(function() {
 var nits = $(this).data("nitsid");
 design[nits]();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-nitsid="funcOne">
 I will call 'funcOne'!
</div>
<div data-nitsid="funcTwo">
 I will call 'funcTwo'!
</div>