Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript/Jquery - Don't repeat yourself
    primarykey
    data
    text
    <p>I've seen this so many times on the internet. People say to don't repeat yourself in programming languages. I wrote this script for my webpage but I repeated myself quite a bit.</p> <p><strong>Is it really that big of a deal?</strong></p> <p>Should I make a function?</p> <p>How do I do it?</p> <pre><code>var active = '.teachers'; var disabled = '.teacher-link'; var width = $('.teachers .staff-outer-container').children().size() * 180; $('.staff-outer-container').css('width', width + 'px'); $('.teacher-link').click(function() { if (active != '.teachers') { $(active).hide(); active = '.teachers'; $(active).show(); width = $('.teachers .staff-outer-container').children().size() * 180; $('.teachers .staff-outer-container').css('width', width + 'px'); $(disabled).removeClass('active').addClass('clickable'); disabled = this; $(disabled).removeClass('clickable').addClass('active'); $('#type').text('Teachers'); } }); $('.admin-link').click(function() { if (active != '.administrators') { $(active).hide(); active = '.administrators'; $(active).show(); width = $('.administrators .staff-outer-container').children().size() * 180; $('.administrators .staff-outer-container').css('width', width + 'px'); $(disabled).removeClass('active').addClass('clickable'); disabled = this; $(disabled).removeClass('clickable').addClass('active'); $('#type').text('Administrators'); } }); $('.support-link').click(function() { if (active != '.support') { $(active).hide(); active = '.support'; $(active).show(); width = $('.support .staff-outer-container').children().size() * 180; $('.support .staff-outer-container').css('width', width + 'px'); $(disabled).removeClass('active').addClass('clickable'); disabled = this; $(disabled).removeClass('clickable').addClass('active'); $('#type').text('Support Staff'); } }); </code></pre> <p><strong>edit</strong> Thanks for everyone's input! I'm confused on how to implement these functions. This is what I got: <code>$('.teacher-link').click(handle_click('.teachers', 'Teachers'));</code> I tried this out and it didn't work. Also where do I place the function? Do I place it inside or outside <code>$(document).ready</code> ? Is it best to put functions at the start or the end of my script?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload