div 只追加一次答案

【问题标题】：Div only appends oncediv 只追加一次
【发布时间】：2017-03-14 18:49:05
【问题描述】：

我有以下代码：

    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);
    });

【问题讨论】：

因为你只创建了 1 个。

标签： javascript jquery loops append

【解决方案1】：

如果唯一的区别是 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);
  });
});

【讨论】：

哦，你很好。我会试试的。我考虑过其他两个“默认”的情况，但这更干净。

【解决方案2】：

您每次都附加相同的元素。

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

【讨论】：