使用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向家長添加跨度

回答

相關問題