Javascript/Jquery-不要重复自己 [英] Javascript/Jquery - Don't repeat yourself

问题描述

我在互联网上看过很多次了.人们说不要用编程语言重复自己.我为网页写了这个脚本，但是我重复了很多次.

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.

真的那么重要吗?

我应该做一个函数吗?

我该怎么做?

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');
    }
});

修改 感谢大家的投入！我对如何实现这些功能感到困惑.这就是我得到的:$('.teacher-link').click(handle_click('.teachers', 'Teachers'));我尝试了一下，但是没有用. 还要在哪里放置函数?是否将其放置在$(document).ready的内部或外部?最好将函数放在脚本的开头或结尾吗?

edit Thanks for everyone's input! I'm confused on how to implement these functions. This is what I got: $('.teacher-link').click(handle_click('.teachers', 'Teachers')); I tried this out and it didn't work. Also where do I place the function? Do I place it inside or outside $(document).ready ? Is it best to put functions at the start or the end of my script?

推荐答案

您可以构建一个这样的函数，并像这样调用它:

You could build a function like this, and call it like:

• handle_click('.teachers', 'Teachers');
• handle_click('.adminstrators', 'Administrators');
• 等

• handle_click('.teachers', 'Teachers');
• handle_click('.adminstrators', 'Administrators');
• etc.

功能:

function handle_click(target, target_text) {
    if (active != target) {
        $(active).hide();
        active = target;
        $(active).show();
        width = $(target + ' .staff-outer-container').children().size() * 180;
        $(target + ' .staff-outer-container').css('width', width + 'px');
        $(disabled).removeClass('active').addClass('clickable');
        disabled = this;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text(target_text);
    }
}

这篇关于Javascript/Jquery-不要重复自己的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！