バニラJavascriptウィンドウ上の要素を操作するサイズ変更

Question

私はJavascriptタブシステムで遊んでいます。

ウィンドウの幅があるブレークポイントを下回ると、タブの内容がアコーディオンレイアウトのリンクの後ろに挿入され、ウィンドウの幅を増やすとプロセスが逆になります。

すべての機能は、ウィンドウのサイズを小さくすると意図したとおりに動作しますが、ウィンドウの幅を大きくすると壊れます。次のコードは、問題の原因となっていますtabBody.appendChild(tabBodyItems[k]);。

3つのうち2つのみが.c-Tabs_BodyItemに追加されますか？

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のインデックスがこれを反映して変更されます。これはループの中でコレクションをループしている間に発生しているので、番号が変更されるため要素をスキップしています。

document.getElementsByClassNameの代わりにdocument.querySelectorAllを使用するのが最も簡単な方法です。これにより、静的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>