Quantcast
Channel: User Brett Merrifield - Stack Overflow
Viewing all articles
Browse latest Browse all 37

JQuery/Javascript Function breaks $(this) (I think)

$
0
0

I was refactoring my code (I think refactoring is the right word), so I used a function so I wouldn't repeat myself so much. But I think the function messed up my $(this).

The part of my code thats commented out works

I think my problem is in the function at 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/

As you can see from my fiddle, the links dont turn grey after clicking. But if I remove the function and uncomment the script, they work again.


Viewing all articles
Browse latest Browse all 37

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>