Question

我正在尝试编写一些简单的jQuery，我可以用它来切换标签面板，手风琴面板，对话框等。我想在所有这些情况下使用相同的代码。有时候会有一些元素不会打开和关闭但只执行其中一个任务，例如对话框右上角的“X”图标。我也想支持这些。

我在这里创建了一支笔：http://codepen.io/allthosehumans/pen/jMjmdK

我能做些什么改进才能让它更优雅？

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

Answer 1

click处理程序可以简化：

var toggleTriggersSetup = function() {
    toggleTriggers.each(function() {

        var targetAction = $(this).attr('data-trigger');
        var targetID = "#" + $(this).attr('data-target');
        var targetElem = $(targetID);

        $(this).click(function() {
            if (targetElem.attr('data-state') == 'active') {
                if (targetAction == 'deactivate' || targetAction == 'toggle') {
                    targetElem.attr('data-state', 'inactive');
                }
            } else {
                if (targetAction == 'activate' || targetAction == 'toggle') {
                    targetElem.attr('data-state', 'active');
                }
            }

            event.preventDefault();
        });
    });
};

...而且我倾向于阅读点击的属性而不是更早，所以如果需要，我可以灵活地动态更改它们。这也可以让我们摆脱each循环：

var toggleTriggersSetup = function() {
    toggleTriggers.click(function() {
        var targetAction = $(this).attr('data-trigger');
        var targetID = "#" + $(this).attr('data-target');
        var targetElem = $(targetID);

        if (targetElem.attr('data-state') == 'active') {
            if (targetAction == 'deactivate' || targetAction == 'toggle') {
                targetElem.attr('data-state', 'inactive');
            }
        } else {
            if (targetAction == 'activate' || targetAction == 'toggle') {
                targetElem.attr('data-state', 'active');
            }
        }

        event.preventDefault();
    });
};

...并且可以说toggleTriggersSetup如此微不足道，不值得投入自己的功能而不仅仅是这样做（但这在很大程度上取决于你的代码结构）。

改进了标签，手风琴，对话框等的通用jQuery切换功能

1 个答案: