2

私はこれをインターネットで何度も見てきました。人々は、プログラミング言語で同じことを繰り返すなと言います。私は自分のウェブページ用にこのスクリプトを書きましたが、かなり繰り返しました。

それは本当に大したことですか？

関数を作るべきですか？

どうすればいいのですか？

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か？関数はスクリプトの最初と最後に配置するのが最適ですか?

4

6 に答える 6

5

「そんなに大変なことですか？」

  • すべてが正常に機能する限り、大したことではありません。
  • 何かが故障したり、いくつかの機能を変更/追加する必要がある場合、それは大したことです.
  • 自分ですべてを処理する小さなコードであれば、大したことではありません
  • 他の誰かがあなたのコードで作業する必要があり、将来的に拡張される場合、それは大したことです。

個人的には、締め切りを何時間も過ぎていて、できるだけ早く公開する必要がある場合は、乱雑で冗長なコードを保持できると思いますが、後でリファクタリングする場合に限ります。問題は、おそらく、コードが公開されると、壊れたりバグを生成したりしない限り、誰もそれを見てリファクタリングしないことです。

あなたのコードを見てください - 新しい機能が動的オブジェクトを生成し、ループなどを使用してそれらの関数でそれらを処理すると誰かが判断した場合はどうでしょうか? あなたのコードではこれは不可能であり、自動化する必要があります。では、そもそもそれを正しくしないのはなぜですか？コードを自動化すると、何か問題が発生した場合に修正するよりもはるかに時間がかからないと思います。

于 2013-05-31T13:05:02.103 に答える
2 
function switchActive(tag,name)
{
    if (active != tag) {
        $(active).hide();
        active = tag;
        $(active).show();
        width = $(tag+' .staff-outer-container').children().size() * 180;
        $(tag+' .staff-outer-container').css('width', width + 'px');
        $(disabled).removeClass('active').addClass('clickable');
        disabled = this;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text(name);
    }
}
$('.teacher-link').click(function(){switchActive('.teacher','Teachers');});
$('.admin-link').click(function(){switchActive('.administrators','Administrators');});
$('.suppport-link').click(function(){switchActive('.support','Support Staff');});
于 2013-05-31T13:05:25.727 に答える