1

我有一个网络应用程序，上面可以有大约 20 个不同的选项按钮，由使用 jQuery UI 图标的跨度表示。其中一些选项最多可以使用 200 次。这些选项是诸如添加、编辑、删除、重新排序页面上的项目之类的。所有这些都包含在一个容器 DIV 中。

本质上，有一个容器 DIV，它有自己的一组选项。其中包含任意数量的部分 DIV，它们具有自己的一组选项。最后，在每个部分中都有面板 DIV，以及它们的选项（每个部分可能 >100 个面板）。由于应用程序的性质，部分和面板将在使用过程中从容器中添加和删除。

单击这些选项中的任何一个时，我想添加一个“活动”类以突出显示它，执行一些代码，具体取决于选择的选项，并在完成后删除活动代码。到目前为止，这些都不是特别困难，但我正在寻找最有效和最佳实践的方法来处理 JQuery 中的事件绑定。

示例 HTML（出于示例的目的，这已被简化，并且某些 JQuery 类可能拼写错误）...

<div id='container'>
    <span class='ui-icon ui-icon-plusthick optionButton addSection'></span>
    <span class='ui-icon ui-icon-gear optionButton editContainer'></span>

    <div>...Overall Container Contents Here...</div>

    <div id='section_1' class='section'>
        <span class='ui-icon ui-icon-gear optionButton editSection'></span>
        <span class='ui-icon ui-icon-minusthick optionButton deleteSection'></span>
        <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpSection'></span>
        <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownSection'></span>
        <span class='ui-icon ui-icon-plusthick optionButton addContent'></span>
        
        <div>...Section 1 Contents Here...</div>

        <div id='panel_1' class='panel'>
            <span class='ui-icon ui-icon-gear optionButton editPanel'></span>
            <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span>
            <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span>
            <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span>

            <div>...Panel 1 Contents Here...</div>
        </div>

        <div id='panel_2' class='panel'>
            <span class='ui-icon ui-icon-gear optionButton editPanel'></span>
            <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span>
            <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span>
            <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span>

            <div>...Panel 2 Contents Here...</div>
        </div>

        .
        .
        .
        (could be 150 panels here)
    </div>

    <div id='section_2' class='section'>
        <span class='ui-icon ui-icon-gear optionButton editSection'></span>
        <span class='ui-icon ui-icon-minusthick optionButton deleteSection'></span>
        <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpSection'></span>
        <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownSection'></span>
        <span class='ui-icon ui-icon-plusthick optionButton addContent'></span>
        
        <div>...Section 2 Contents Here...</div>

        <div id='panel_151' class='panel'>
            <span class='ui-icon ui-icon-gear optionButton editPanel'></span>
            <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span>
            <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span>
            <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span>

            <div>...Panel 151 Contents Here...</div>
        </div>

        <div id='panel_152' class='panel'>
            <span class='ui-icon ui-icon-gear optionButton editPanel'></span>
            <span class='ui-icon ui-icon-minusthick optionButton deletePanel'></span>
            <span class='ui-icon ui-icon-arrow-1-n optionButton moveUpPanel'></span>
            <span class='ui-icon ui-icon-arrow-1-s optionButton moveDownPanel'></span>

            <div>...Panel 152 Contents Here...</div>
        </div>

        .
        .
        .
        (could be another 150 panels here)
    </div>

    .
    .
    .
    (could be multiple sections here)
</div>

这是广泛的布局，我需要将单击事件绑定到具有optionButton类的任何内容。目前我正在使用这个...

$('#container').on('click', '.optionButton:not(".ui-state-disabled")', function(e) {
    var $tgt = $(this);
    $tgt.addClass("ui-state-active")

    if($tgt).hasClass('addSection') {
        // code for addSection button
    }

    if($tgt).hasClass('editContainer') {
        // code for editContainer button
    }

    ...and so on for all 20 buttons...

    $tgt.removeClass("ui-state-active")
});

这是最好的方法吗？

或者，是否可以在每个按钮样式上添加点击绑定？（即对on()函数的 20 次调用）

单个绑定的问题是代码变得非常繁琐并且很难很快地遵循，但它确实很好地适应了一个常见的绑定。

我考虑过的其他想法...

  • 立即分支到单个绑定中的函数调用，以便它只包含一个列表if($tgt.hasClass('thisClass')) { doThisFunction($tgt); }
  • 在每个选项按钮范围内放置一个自定义元素。例如thisOption='editContent'. 然后，调用一个函数editContent，这样我也许可以使用类似的东西eval( $tgt.prop('thisOption') + '(' + $tgt + ')' );来自动让 span 控制它在单击时调用的函数。只要每个“thisOption”值都有一个相关的功能，整个绑定只需要在其功能中的几行代码
  • 我已经查看了 JQuery 中的自定义事件，并使用 整体绑定触发它们.trigger()，但我认为这与拥有 20 次点击绑定没有什么不同

任何有关实现此目的的最佳方法的建议都将非常受欢迎（或者如果我以错误的方式考虑这一点，则可以选择任何替代方法）。我正在逐步建立这个项目，并注意在每一步都尽可能高效。如果我没有很好地解释这一点，我很抱歉，我会再试一次。

4

2 回答 2

0

如果您对所有元素都有一个共同的逻辑，那么对所有元素使用一个共同的绑定。如果您没有共同的逻辑，那么最好使用不同的绑定。

于 2013-08-06T10:52:50.613 回答
0

拥有 20 个委托是一个更好的做法，.on()因为否则在每个点击事件上，整个逻辑都将被执行以检查精确的目标是什么。否则只会执行目标的特定逻辑。您实际上是在重复部分委托功能，即on()让它委托给非特定选择器，然后在您自己的函数中使其具体化。

于 2013-08-06T10:49:11.907 回答