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

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) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var rarityName = data.card_variations[0].card_rarity;&nbsp; &nbsp; counts[rarityName] = counts[rarityName] ? counts[rarityName] + 1 : 1;&nbsp; &nbsp; var friendlyClassName = "." + rarityName.toLowerCase().split(" ").join("-");&nbsp; &nbsp; 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>');&nbsp;&nbsp;});&nbsp;

Answer 2

您可以使用字典来跟踪计数并使用稀有度作为键。如果你改变你的类来匹配稀有性，你也可以减少很多代码重复。counts = {&nbsp; "Secret Rare": 0,&nbsp; "Ultra Rare": 0,&nbsp; "Super Rare": 0,&nbsp; "Rare": 0,&nbsp; "Short Print": 0,&nbsp; "Common": 0&nbsp;&nbsp;}jQuery.each(val, function (i, data) {&nbsp;&nbsp;&nbsp; let rarity = data.card_variations[0].card_rarity;&nbsp; let className = rarity.toLowerCase().replace(" ", "-");&nbsp; counts[rarity] += 1;&nbsp; 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>');&nbsp;});

Answer 3

你能建立一个地图对象吗？键是 card_rarity 名称，值是 {element, count}。map.has(key) 将检查它是否已经存在 - 如果存在，获取 {element, count} 值，提取元素名称，更新计数值，然后使用 map.set(key, {element, count} ) 更新地图。如果密钥不存在，请创建一个新密钥。您仍然需要手动创建要将数据附加到的元素 - 尽管如果它是新密钥，您也许也可以自动创建这些元素？