JQuery/Javascript函數打破$（this）（我認爲）

我正在重構我的代碼（我認爲重構是正確的詞），所以我使用了一個函數，所以我不會重複自己這麼多。但我認爲這個函數搞亂了我的$（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/

正如你可以從我的小提琴看，點擊後鏈接不會變灰。但是，如果我刪除該功能並取消註釋腳本，它們將再次運行。

來源

2013-05-31 Brett Merrifield

就是你能休息意思？控制檯說什麼？問題是什麼？ – MMM

問題到底是什麼？請提供錯誤，預期與實際輸出等。 –

this =這裏的窗口 –

你需要這個DEMO

問題是，當你註冊一個處理的處理程序得到哪個用戶clciked作爲this元素......但是當你調用handle_clickthis成爲窗口對象。

所以解決方案是通過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-31 15:12:07

完美!!!!非常感謝！你不知道：] –

this根據您如何調用該函數設置。

當您調用像handle_click(...)這樣的普通函數時，this將成爲全局對象。
你可以通過調用call調用具有不同this功能：

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

或者，您可以通過this作爲一個正常的參數，並使用該參數，而不是this裏面的功能。

來源

2013-05-31 14:24:50 SLaks

更新：http://jsfiddle.net/X6AbR/ –

我將不得不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(); 
      ...

雖然我可能不是存儲對象和TARGET_TEXT，並在類名的形式在DOM主動/禁止/或數據屬性而不是傳遞給它們，比如你對上一個問題的回答：https://stackoverflow.com/a/16858484/400654。如果您只需在DOM中添加另一個元素，並且您的JavaScript會自動適應該元素，那麼它將更具可維護性。

來源

2013-05-31 14:32:19

你應該重命名爲'createClickHandler（）'。 – SLaks

JQuery/Javascript函數打破$（this）（我認爲）

回答

相關問題