从结果中自动创建变量名？

Question

我试图弄清楚如何从无数 if/else 语句中优化我的代码。我当前的代码是：jQuery.each(val, function (i, data) {            //Secret Rare    if(data.card_variations[0].card_rarity == 'Secret Rare'){                secretcount++;                   jQuery('.secret-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');        }           //Ultra Rare    if(data.card_variations[0].card_rarity == 'Ultra Rare'){                ultracount++;                   jQuery('.ultra-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');        }                    //Super Rare    if(data.card_variations[0].card_rarity == 'Super Rare'){                supercount++;                    jQuery('.super-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');        }        //Rare    if(data.card_variations[0].card_rarity == 'Rare'){                rarecount++;                 jQuery('.rare-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');        }           //ShortPrint    if(data.card_variations[0].card_rarity == 'Short Print'){                shortprintcount++;                  jQuery('.shortprint-cards').append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');        }                  如您所见，这是一堆 if/else 语句，用于检查特定稀有度并根据当前稀有度附加到 div。有超过 25 种不同的稀有度，所以我想我不能继续这样下去，我还需要通过代码手动适应每一种稀有度。我还对每个进行计数以输出它们的数量。是否有为计数器分配变量并根据结果动态创建 div 类名的最佳方法？编辑：也许最佳方法是创建一个包含所有稀有性的数组。由于这仍然需要手动更新，也许我可以通过 PHP 查询数据库以获取所有稀有度，然后填充此数组...

Answer 1

由于在浏览器中var x = 1等于var window.x = 1，您可以使用全局对象创建动态变量名。

var rarityName = data.card_variations[0].card_rarity;

window[rarityName] = window[rarityName] ? window[rarityName] + 1 : 1;

但最好只创建一个作用域对象，它会为你存储计数。

var counts = {}; // declare once in global scope somewhere first

//

var rarityName = data.card_variations[0].card_rarity;

counts[rarityName] = counts[rarityName] ? counts[rarityName] + 1 : 1;

所以它会是这样的：

var counts = {};

jQuery.each(val, function (i, data) {    

    var rarityName = data.card_variations[0].card_rarity;

    counts[rarityName] = counts[rarityName] ? counts[rarityName] + 1 : 1;

    var friendlyClassName = "." + rarityName.toLowerCase().split(" ").join("-");

    jQuery(friendlyClassName).append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>');  

}); 

Answer 2

您可以使用字典来跟踪计数并使用稀有度作为键。如果你改变你的类来匹配稀有性，你也可以减少很多代码重复。

counts = {

  "Secret Rare": 0,

  "Ultra Rare": 0,

  "Super Rare": 0,

  "Rare": 0,

  "Short Print": 0,

  "Common": 0  

}

jQuery.each(val, function (i, data) {  

  let rarity = data.card_variations[0].card_rarity;

  let className = rarity.toLowerCase().replace(" ", "-");

  counts[rarity] += 1;

  jQuery(className).append('<figure><img src="'+data.card_img+'" title="'+data.card_name+'" alt="'+data.card_name+'"><figcaption>'+data.card_variations[0].card_code+'<figcaption></figure>'); 

});

Answer 3

你能建立一个地图对象吗？键是 card_rarity 名称，值是 {element, count}。map.has(key) 将检查它是否已经存在 - 如果存在，获取 {element, count} 值，提取元素名称，更新计数值，然后使用 map.set(key, {element, count} ) 更新地图。如果密钥不存在，请创建一个新密钥。

您仍然需要手动创建要将数据附加到的元素 - 尽管如果它是新密钥，您也许也可以自动创建这些元素？