股利只追加一次

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

怎么样一个简单的直列如果作为唯一的区别是在阵列中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); 
    }); 
}); 

Answer 2

要附加每一次相同的元素。

$('<div />') 

创建了一个元素，这是同一个每次apended

变化到这样的事情：

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