Reputation: 6296
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
}
Upvotes: 2
Views: 3725
Reputation: 12452
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>
Upvotes: 1
Reputation:
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
};
Upvotes: 2