Question

我有以下代码：

    switch (caseType) {
        case "dates":
            $.each(array.reverse(), function (index, arr) {
                var $accordionOption = $('<div />', {
                    "class": "option",
                    "data-select": 'option',
                    "data-action": 'makePie',
                    text: arr
                });

                $accordionOption.appendTo($accordionOptionContainer);
                $accordionOption.click(function () {
                    cache.select(this);
                });
            });
            break;
        case "cohort":
            $.each(array, function (index, arr) {
                var $accordionOption = $('<div />', {
                    "class": "option",
                    "data-select": 'option',
                    "data-action": 'makePie',
                    text: arr
                });

                $accordionOption.appendTo($accordionOptionContainer);
                $accordionOption.click(function () {
                    cache.select(this);
                });
            });
            break;
        case "period":

            $.each(array, function (index, arr) {
                console.log(arr)
                var $accordionOption = $('<div />', {
                    "class": "option",
                    "data-select": 'option',
                    "data-action": 'makePie',
                    text: arr
                });

                $accordionOption.appendTo($accordionOptionContainer);
                $accordionOption.click(function () {
                    cache.select(this);
                });
            });
            break;

    }

它有效，它会生成元素并将其附加到DOM。

我想清理它，所以我尝试了这个：

    var $accordionOption = $('<div />', {
        "class": "option",
        "data-select": 'option',
        "data-action": 'makePie'
    });

    switch (caseType) {
        case "dates":
            $.each(array.reverse(), function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo($accordionOptionContainer);
            });
            break;
        case "cohort":
            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo($accordionOptionContainer);
            });
            break;
        case "period":

            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo($accordionOptionContainer);
            });
            break;
    }
    $accordionOption.click(function () {
        cache.select(this);
    });

但是，我注意到它只追加循环中的最后一个数组项。这是因为每次都必须重新创建变量吗？或者因为它在追加之前将所有内容添加到手风琴选项中？或者覆盖相同的变量？

我的最终解决方案：

    function getDiv() {
        return $('<div />', {
            "class": "option",
            "data-select": 'option',
            "data-action": 'makeTable'
        });
    }

    $.each(caseType == "dates" ? array.reverse() : array, function (index, arr) {
        var $accordionOption = getDiv()
                .text(arr)
                .click(function () { cache.select(this) })
                .appendTo($accordionOptionContainer);
    });

Answer 1

每次都附加相同的元素。

$('<div />')

创建一个元素，这与每次附加的元素相同

改为这样：

 function getDiv(){
     return  $('<div />', {
        "class": "option",
        "data-select": 'option',
        "data-action": 'makePie'
    });}

    switch (caseType) {
        case "dates":
            $.each(array.reverse(), function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo(getDiv());
            });
            break;
        case "cohort":
            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo(getDiv());
            });
            break;
        case "period":

            $.each(array, function (index, arr) {
                $accordionOption.text(arr);
                $accordionOption.appendTo(getDiv());
            });
            break;
    }
    $accordionOption.click(function () {
        cache.select(this);
    });

Answer 2

如果唯一的区别在于dates中的数组，那么如何使用简单的内联。

$.each(caseType == "dates" ? array.reverse() : array, function(index, arr) {
  var $accordionOption = $('<div />', {
    "class": "option",
    "data-select": 'option',
    "data-action": 'makePie'
  });
  $accordionOption.text(arr);
  $accordionOption.appendTo($accordionOptionContainer);
  $accordionOption.click(function() {
    cache.select(this);
  });
});

Div仅附加一次

2 个答案: