0

我正在重构我的代码（我认为重构是正确的词），所以我使用了一个函数，所以我不会重复自己太多。但我认为这个函数搞砸了我的 $(this)。

我的代码中被注释掉的部分有效

我认为我的问题出在函数中disabled = this;

var active = '.teachers';
var disabled = '.teacher-link';
var width = $('.teachers .staff-outer-container').children().size() * 180;
$('.staff-outer-container').css('width', width + 'px');

/* BELOW IS COMMENTED OUT
$('.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');
    }
});
END COMMENT */

$('.teacher-link').click(function(){handle_click('.teachers','Teachers');});
$('.admin-link').click(function(){handle_click('.administrators','Administrators');});
$('.support-link').click(function(){handle_click('.support','Support Staff');});

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

http://jsfiddle.net/X6AbR/

正如您从我的小提琴中看到的那样，单击后链接不会变成灰色。但是，如果我删除该函数并取消注释脚本，它们就会再次起作用。

4

3 回答 3

3

this根据调用函数的方式设置。

当您调用普通函数时handle_click(...)， ,this成为全局对象。
您可以通过调用以不同this的方式调用该函数call：

handle_click.call(customThis, arg1, arg2, ...);

this或者，您可以作为普通参数传递并使用该参数而不是this在函数内部。

于 2013-05-31T14:24:50.313 回答
1

你需要这个DEMO

问题是，当您注册一个处理程序时，该处理程序会获取用户单击的元素作为this... 但是当您调用时，它handle_click this会变成窗口对象。

所以解决方案是this作为参数传递给handle_click

$('.teacher-link').click(function(){handle_click('.teachers','Teachers', this);}); // pass this  as a parameter... 

$('.admin-link').click(function(){handle_click('.administrators','Administrators', this);});
$('.support-link').click(function(){handle_click('.support','Support Staff', this);});

function handle_click(target, target_text, clickedElement) {
    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 = clickedElement;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text(target_text);
    }
}
于 2013-05-31T15:12:07.400 回答
0

我会让 handleClick 返回一个特定于该处理程序的函数：http: //jsfiddle.net/X6AbR/1/

$('.teacher-link').click(createClickHandler('.teachers','Teachers'));
$('.admin-link').click(createClickHandler('.administrators','Administrators'));
$('.support-link').click(createClickHandler('.support','Support Staff'));

function createClickHandler(target, target_text) {
    return function (e) {
        e.preventDefault();
        if (active != target) {
            $(active).hide();
            ...

虽然我可能会以 classNames 和/或数据属性的形式存储 target 和 target_text 以及 DOM 中的 active/disabled，而不是传递它们，例如您之前问题的答案：https://stackoverflow。 com/a/16858484/400654。如果您可以在 DOM 中添加另一个元素并且您的 javascript 会自动适应它，那么它会更易于维护。

于 2013-05-31T14:32:19.860 回答