Question

我有一个网络应用程序，其上可以有大约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类将click事件绑定到任何内容。目前我正在使用这个...

$('#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")
});

这是最好的方法吗？

或者，对每个按钮样式设置单击绑定是否可以？（即20次调用“on（）”函数）

单个绑定的问题在于代码变得非常麻烦并且很难很快地遵循，但它确实非常适合在一个常见的绑定下完成。

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

立即分支到单个绑定中的函数调用，以便它只包含一个“if（$ tgt.hasClass（'thisClass'））{doThisFunction（$ tgt）;}
在每个选项按钮范围内放置一个自定义元素。例如“thisOption ='editContent'”。然后，有一个名为“editContent”的函数，这样我就可以使用像eval这样的东西（$ tgt.prop（'thisOption'）+'（'+ $ tgt +'）'）;自动使跨度控制单击它时调用的函数。只要每个“thisOption”值都有一个相关的函数，整个绑定在其函数中只需要几行代码
- 我查看了JQuery中的自定义事件，并使用.trigger（）进行了整体绑定触发，但我认为这与点击绑定没有任何区别

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

Answer 1

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

Answer 2

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

使用JQuery将点击绑定到多个元素的最佳实践方法

2 个答案: