javascript - 如何在JQuery中动态调用函数

Question

我已经设置了html代码，我想为每组都有一个函数，我可以在其中提取一些数据或执行一些事件，所以基本上我需要根据html调用函数代码存在于 DOM 中，假设我有标题部分，我想收集菜单项，并且我有 slider ，我想在其中收集 slider 信息，所以我需要调用标题函数来相应地执行事件， slider 函数来执行该事件，我遇到了一些有关 eval() 的信息，但我猜它有很多缺点并且已经过时了。请建议我如何实现它。

HTML 代码: 标题

<div class="header" data-nitsid="1">
    <div class="branding">
        <h1 class="logo">
            <a href="index.html"><img src="images/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c50535b537c0e44124c525b" rel="noreferrer noopener nofollow">[email protected]</a>" 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>

现在我想从这两个元素收集数据，并将数据传递到 Laravel 框架的 View ，在那里它将为每个部分生成一个弹出窗口以进行编辑。

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

您不能使用文字数字作为属性名称。如果您想调用对象 design 的属性 1，请使用 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
};