Question

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

我的代码中已注释掉的部分

我认为我的问题出在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/

正如您从我的小提琴中看到的那样，点击后链接不会变灰。但是，如果我删除该功能并取消注释脚本，它们会再次工作。

Answer 1

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

当您调用像handle_click(...)这样的普通函数时，this将成为全局对象您可以通过调用this：

来使用其他call来调用该函数

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

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

Answer 2

您需要 DEMO

问题是当你注册一个处理程序时，处理程序获取用户clciked为this的元素...但是当你调用handle_click this时会成为window对象。

因此，解决方案将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);
    }
}

Answer 3

我会有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，而不是传递它们，例如对前一个问题的回答：{{3 }}。如果你可以在DOM中添加另一个元素并且你的javascript会自动适应它，那就更容易维护了。

JQuery / Javascript函数打破$（this）（我认为）

3 个答案: