如何在JQuery中动态调用函数

Question

我已经设置了html codes，我想为每一组设置一个函数，在这里我可以提取一些数据或者做一些活动，所以基本上我需要根据DOM中的html代码调用函数，假设我有标题部分，我想收集菜单项，我有滑块来收集滑块信息，所以我需要调用标头函数来进行相应的活动，并调用滑块函数来执行这个活动，我浏览了一些关于eval()的信息，但是我想它有很多坏处，而且已经过时了。请建议我如何做到这一点。

HTML：头

<div class="header" data-nitsid="1">
    <div class="branding">
        <h1 class="logo">
            <a href="index.html"><img src="images/logo@2x.png" 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>

滑翔机

<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>

现在，我想从这两个元素中收集数据，并将数据传递到laravel框架的视图中，在该视图中，它将为每个部分生成一个弹出以供编辑。

$('.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
}

Answer 1

您不能使用文字编号作为属性名。如果要调用属性1 of object design，则使用design[1]代替。此外，不能将属性转换为非初始化变量，必须使用var design = {};使其成为对象.如果design对象的属性存储在nits变量中，那么将其称为design[nits]();。另外，下次不要忘记在这里发布代码之前测试您的代码。在第一个函数之后，您已经忘记了)。

$('.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
};

Answer 2

您想要使用design[nits]();。

这将获得属性nits of design并使用()执行它。

但还有另一个问题。您的design将在each循环之后声明，因此它在内部不可用。你得把它放在前面。

​

$(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>

​