在窗口調整大小的香草JavaScript操作元素

Question

我正在玩Javascript選項卡系統。

隨着窗口寬度低於某一斷點手風琴佈局的鏈接後的標籤內容插入，並且當增加窗口寬度的過程相反。按預期爲你減少窗口大小，但休息，你增加窗口寬度

一切正常。以下代碼導致問題tabBody.appendChild(tabBodyItems[k]);。

只有3個.c-Tabs_BodyItem元件追加的2＆pi

HTML

<div class="c-Tabs" id="js-Tabs"> 
    <div class="o-Container"> 
     <div class="o-Row c-Tabs_Head"> 
      <div class="o-Col-sm-4 c-Tabs_HeadItem"> 
       <a href="" class="c-Tabs_Link">Link 1</a> 
      </div> 
      <div class="o-Col-sm-4 c-Tabs_HeadItem is-active"> 
       <a href="" class="c-Tabs_Link">Link 2</a> 
      </div> 
      <div class="o-Col-sm-4 c-Tabs_HeadItem"> 
       <a href="" class="c-Tabs_Link">Link 3</a> 
      </div> 
     </div> 
     <div class="c-Tabs_Body"> 
      <div class="c-Tabs_BodyItem"> 
       <ul> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
       </ul> 
      </div> 
      <div class="c-Tabs_BodyItem is-active"> 
       <ul> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
       </ul> 
      </div> 
      <div class="c-Tabs_BodyItem"> 
       <ul> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

的Javascript

我將不會顯示的JavaScript的實際黏合系統;這不會導致問題。

function insertAfter(el, referenceNode) 
{ 
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling); 
} 

function debounce(func, wait, immediate) 
{ 
    var timeout; 

    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
} 

var tabHeadItems = document.getElementsByClassName('c-Tabs_HeadItem'); 
var tabBody = document.querySelector('.c-Tabs_Body'); 
var tabBodyItems = document.getElementsByClassName('c-Tabs_BodyItem'); 
var isTabs = true; 

function setTab() 
{ 
    if (window.matchMedia('(min-width: 768px)').matches && isTabs === false) 
    { 
     for(var k = 0, lenK = tabBodyItems.length; k < lenK; k++) 
     { 
      tabBody.appendChild(tabBodyItems[k]); 
     } 

     isTabs = true; 
    } 
    else if (window.matchMedia('(max-width: 767px)').matches && isTabs === true) 
    { 
     for(var l = 0, lenL = tabBodyItems.length; l < lenL; l++) 
     { 
      insertAfter(tabBodyItems[l], tabHeadItems[l]); 
     } 

     isTabs = false; 
    } 
} 

setTab(); 

var debounceSetTab = debounce(function() { 
    setTab(); 
}, 250); 

window.addEventListener('resize', debounceSetTab); 

Answer 1

的原因是getElementsByClassName返回現場NodeList。這意味着隨着DOM的變化，NodeList的內容發生變化以反映它。元素tabBodyItems的順序取決於它們在DOM中的位置，因此當您在DOM中移動元素時，其tabBodyItems中的索引更改以反映此情況。在循環播放for循環中的集合時發生這種情況，因此您將跳過元素，因爲它們會重新編號。

這個最簡單的解決辦法是使用document.querySelectorAll而不是document.getElementsByClassName。這將返回一個靜態的NodeList。

function insertAfter(el, referenceNode) 
 
{ 
 
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling); 
 
} 
 

 
function debounce(func, wait, immediate) 
 
{ 
 
    var timeout; 
 

 
    return function() { 
 
     var context = this, args = arguments; 
 
     var later = function() { 
 
      timeout = null; 
 
      if (!immediate) func.apply(context, args); 
 
     }; 
 
     var callNow = immediate && !timeout; 
 
     clearTimeout(timeout); 
 
     timeout = setTimeout(later, wait); 
 
     if (callNow) func.apply(context, args); 
 
    }; 
 
} 
 

 
var tabHeadItems = document.querySelectorAll('.c-Tabs_HeadItem'); 
 
var tabBody = document.querySelector('.c-Tabs_Body'); 
 
var tabBodyItems = document.querySelectorAll('.c-Tabs_BodyItem'); 
 
var isTabs = true; 
 

 
function setTab() 
 
{ 
 
    if (window.matchMedia('(min-width: 768px)').matches && isTabs === false) 
 
    { 
 
     for(var k = 0, lenK = tabBodyItems.length; k < lenK; k++) 
 
     { 
 
      tabBody.appendChild(tabBodyItems[k]); 
 
     } 
 

 
     isTabs = true; 
 
    } 
 
    else if (window.matchMedia('(max-width: 767px)').matches && isTabs === true) 
 
    { 
 
     for(var l = 0, lenL = tabBodyItems.length; l < lenL; l++) 
 
     { 
 
      insertAfter(tabBodyItems[l], tabHeadItems[l]); 
 
     } 
 

 
     isTabs = false; 
 
    } 
 
} 
 

 
setTab(); 
 

 
var debounceSetTab = debounce(function() { 
 
    setTab(); 
 
}, 250); 
 

 
window.addEventListener('resize', debounceSetTab);

<div class="c-Tabs" id="js-Tabs"> 
 
    <div class="o-Container"> 
 
     <div class="o-Row c-Tabs_Head"> 
 
      <div class="o-Col-sm-4 c-Tabs_HeadItem"> 
 
       <a href="" class="c-Tabs_Link">Link 1</a> 
 
      </div> 
 
      <div class="o-Col-sm-4 c-Tabs_HeadItem is-active"> 
 
       <a href="" class="c-Tabs_Link">Link 2</a> 
 
      </div> 
 
      <div class="o-Col-sm-4 c-Tabs_HeadItem"> 
 
       <a href="" class="c-Tabs_Link">Link 3</a> 
 
      </div> 
 
     </div> 
 
     <div class="c-Tabs_Body"> 
 
      <div class="c-Tabs_BodyItem" id="body1"> 
 
       <ul> 
 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
 
       </ul> 
 
      </div> 
 
      <div class="c-Tabs_BodyItem is-active" id="body2"> 
 
       <ul> 
 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
 
       </ul> 
 
      </div> 
 
      <div class="c-Tabs_BodyItem"id="body3"> 
 
       <ul> 
 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>