使用JavaScript向家长添加跨度

我编写了一个JavaScript函数，其采用段落元素中类别mini的跨度的当前数量，其编号为mega，该值至少为1，如果少于4，则添加足以让4.如果没有第二mini，那么第二mini，其功能应该创建，应该说2^nd，如果创建了第三个，应该说3^rd，如果第四个是创建时，应该说4^th。例如，如果已经有2个mini跨度，程序，应增加2个，第一个被添加说3^rd，第二个说：4^rd。下面的代码：使用JavaScript向家长添加跨度

function addSpans(currentNumOfSpans) 
{ 
    var mega  = document.getElementById("mega"); 
    var mini  = document.createElement("span"); 
    mini.className = "mini"; 
    if (currentNumOfSpans < 4) 
    { 
     if (currentNumOfSpans < 3) 
     { 
      if (currentNumOfSpans < 2) 
      { 
       mini.innerHTML = "2<sup>nd</sup>; 
       mega.appendChild(mini); 
      } 
      mini.innerHTML = "3<sup>rd</sup>; 
      mega.appendChild(mini); 
     } 
     mini.innerHTML = "4<sup>th</sup>; 
       mega.appendChild(mini); 
    } 
}

SOOOO ....如果currentNumOfSpans是3，它工作正常，并增加了对4th百万。但是，如果currentNumOfSpans是1或2，它应该分别添加2nd3rd4th或3rd4th，它只是增加4th。有人能帮我弄清楚这有什么问题吗？任何帮助的赞赏，谢谢！注意：如果您发现任何错别字，请注释或编辑，但它们不是问题，我检查过我的代码在语法检查器中，但我经常在我的代码中出现错误，因为我使用一个小巧的手机键盘。所以基本上，我可能提出的错字不是真正的问题。谢谢！

来源

2015-12-01 Bill Bllson

'currentNumOfSpans = CurrentNumOfSpans' – Shomz

@Shomz感谢;） –

您的示例中包含一些拼写错误，其中大部分可通过调试器运行您的代码（如http://jshint.com）来找到。

但是，我会使用更多功能的方法。下面的方法并不像你的那样硬编码，所以你可以用它来处理多个元素，或者使用不同数量的跨度，而且对用法的变化很小，我在下面的演示中已经展示过了。！

function getSuffix(i) { 
 
    var j = i % 10, k = i % 100; 
 
    if (j == 1 && k != 11) return i + "<sup>st</sup>"; 
 
    if (j == 2 && k != 12) return i + "<sup>nd</sup>"; 
 
    if (j == 3 && k != 13) return i + "<sup>rd</sup>"; 
 
    return i + "<sup>th</sup>"; 
 
} 
 
function addSpans(scope, length) { 
 
    var spans = scope.querySelectorAll('.mini'); 
 
    var current = length - (length - spans.length); 
 
    while(current < length) { 
 
     var span = document.createElement('span'); 
 
     span.className = 'mini'; 
 
     span.innerHTML = getSuffix(++current); 
 
     scope.appendChild(span); 
 
    } 
 
} 
 

 
var wrap = document.querySelector('.wrap'), divs; 
 
var clone = wrap.cloneNode(true); 
 

 
wrap.parentNode.appendChild(clone); 
 

 
divs = wrap.querySelectorAll('.mega'); 
 
for(var i in Object.keys(divs)) addSpans(divs[i], 4); 
 

 
divs = clone.querySelectorAll('.mega'); 
 
for(var i in Object.keys(divs)) addSpans(divs[i], 6 + (i * 2));

.mega { font-size: 0; } .mini { display: inline-block; width: 40px; font-size: 16px; }

<div class="wrap"> 
 
    <div class="mega"></div> 
 
    <div class="mega"><span class="mini">1<sup>st</sup></span></div> 
 
    <div class="mega"><span class="mini">1<sup>st</sup></span><span class="mini">2<sup>nd</sup></span></div> 
 
    <div class="mega"><span class="mini">1<sup>st</sup></span><span class="mini">2<sup>nd</sup></span><span class="mini">3<sup>rd</sup></span></div> 
 
    <div class="mega"><span class="mini">1<sup>st</sup></span><span class="mini">2<sup>nd</sup></span><span class="mini">3<sup>rd</sup></span><span class="mini">4<sup>th</sup></span></div> 
 
</div>

来源

2015-12-01 03:42:39

使用JavaScript向家长添加跨度

回答

相关问题