Div只追加一次

Div only appends once

本文关键字：一次追加 Div 更新时间：2023-09-26

我有以下代码:

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

然而，我注意到它只追加了循环中的最后一个数组项。这是因为每次都要重新创建变量吗?还是因为它在附加之前将所有内容添加到accordion选项中?或者重写相同的变量?

我的最终解决方案:

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

简单的内联if如何，因为唯一的区别是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 />')

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

改成这样:

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