DRY - Sibling Elements

-1

Gibt es eine Möglichkeit, den JS-Code zu kürzen, brauche es in Vanille JS nicht Jquery.DRY - Sibling Elements

Ich kann das nächste und vorherige Geschwisterkonzept hier nicht verwenden. previousElementSibling und nextElementSibling Konzept funktioniert, aber was ist, wenn die Auswahl mehr ist, dass 3

\t document.getElementById("network_tab").addEventListener("click", function(){ 
 
\t \t this.classList.add('active'); 
 
\t \t document.getElementById("network_tag_tab").classList.remove('active'); 
 
\t \t document.getElementById("device_tab").classList.remove('active'); 
 
\t }); 
 
\t 
 
\t document.getElementById("network_tag_tab").addEventListener("click", function(){ 
 
\t \t this.classList.add('active'); 
 
\t \t document.getElementById("network_tab").classList.remove('active'); 
 
\t \t document.getElementById("device_tab").classList.remove('active'); 
 
\t }); 
 

 
\t document.getElementById("device_tab").addEventListener("click", function(){ 
 
\t \t this.classList.add('active'); 
 
\t \t document.getElementById("network_tag_tab").classList.remove('active'); 
 
\t \t document.getElementById("network_tab").classList.remove('active'); 
 
\t }); \t

.active{ 
 
border: 5px solid black; 
 
padding: 10px; 
 
}

\t \t <table id="nav-table"> 
 
\t \t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td id="network_tab" class="org_overview_tab active"><a href="#">Networks</a></td> 
 
\t \t \t \t <td id="network_tag_tab" class="org_overview_tab"><a href="#">Network tags</a></td> 
 
\t \t \t \t <td id="device_tab" class="org_overview_tab left-border"><a href="#">Devices</a></td> 
 
    
 
\t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table>

Quelle

2017-07-10 Deepika Rao

Ihnen danken den Code für die Ansicht und ein Snippet bietet, aber wo kommt Ihr Code schief gehen? Wie weit haben Sie eine generische Funktion geschrieben, um diese Anforderung zu erfüllen? –

Code funktioniert, aber wollte DRY-Format davon, wenn überhaupt –

Sie einen Eventlistener müssen nur ...

document.getElementById('nav-table').addEventListener('click', e => { 
    if (e.target.nodeName== 'A'){ 
    document.querySelector('.active').classList.remove('active'); 
    e.target.parentNode.classList.add('active'); 
    } 
});

Quelle

2017-07-10 12:19:55

Dies funktioniert. Danke –

Wie bekomme ich den nodeName der Spalte - td –

'console.log (e.target.parentNode.id);' –

Sie die JS-Code verallgemeinern kann. Auf diese Weise funktioniert es auch, wenn Sie mehr Registerkarten hinzufügen, ohne JS zu ändern. Überprüfen Sie den folgenden Code.

var tabs = document.querySelectorAll('.org_overview_tab'); 
 
for(var index=0;index<tabs.length;index++) { 
 
    tabs[index].addEventListener('click', function(){ 
 
    document.querySelector('.active').classList.remove('active'); 
 
    this.classList.add('active'); 
 
}); 
 
}

.active{ 
 
border: 5px solid black; 
 
padding: 10px; 
 
}

\t \t <table id="nav-table"> 
 
\t \t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td id="network_tab" class="org_overview_tab active"><a href="#">Networks</a></td> 
 
\t \t \t \t <td id="network_tag_tab" class="org_overview_tab"><a href="#">Network tags</a></td> 
 
\t \t \t \t <td id="device_tab" class="org_overview_tab left-border"><a href="#">Devices</a></td> 
 
    
 
\t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table>

Quelle

2017-07-10 12:18:51

dies funktioniert auch, aber müssen basierend auf der ID nicht die Klasse zugreifen –

DRY - Sibling Elements

Antwort

Verwandte Themen