Adding click handler to multiple IDs

Question

I'm kinda new at this jQuery stuff and I've gathered up this much to make my code functional, but I would really want to shorten it. I've already tried $('#Monday','#Tuesday'....) to group them, but with no success.

$('#Monday').click(function() {
 if ($(this).hasClass("active")){
 $(this).switchClass( "active", "inactive", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', true);
 } else {
 $(this).switchClass( "inactive", "active", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', false);
 }
 $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});
$('#Tuesday').click(function() {
 if ($(this).hasClass("active")){
 $(this).switchClass( "active", "inactive", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', true);
 } else {
 $(this).switchClass( "inactive", "active", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', false);
 }
 $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});
$('#Wednesday').click(function() {
 if ($(this).hasClass("active")){
 $(this).switchClass( "active", "inactive", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', true);
 } else {
 $(this).switchClass( "inactive", "active", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', false);
 }
 $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});
$('#Thursday').click(function() {
 if ($(this).hasClass("active")){
 $(this).switchClass( "active", "inactive", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', true);
 } else {
 $(this).switchClass( "inactive", "active", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', false);
 }
 $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});
$('#Friday').click(function() {
 if ($(this).hasClass("active")){
 $(this).switchClass( "active", "inactive", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', true);
 } else {
 $(this).switchClass( "inactive", "active", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', false);
 }
 $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});
$('#Saturday').click(function() {
 if ($(this).hasClass("active")){
 $(this).switchClass( "active", "inactive", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', true);
 } else {
 $(this).switchClass( "inactive", "active", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', false);
 }
 $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});
$('#Sunday').click(function() {
 if ($(this).hasClass("active")){
 $(this).switchClass( "active", "inactive", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', true);
 } else {
 $(this).switchClass( "inactive", "active", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', false);
 }
 $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});

• Marc B: not going to read all of that, but if ALL of those .click() calls have indentical contents, why not just have ONE $('#Sunday, #Monday, #Tuesday, #blahblahbhal').click(...) call?
• Stephen Ostermiller: You say you have used $('#Monday','#Tuesday'....) to group them, but that has a syntax error. There should only be one set of single quotes around the whole thing like Marc B suggests.

Answer 1

You should add a class to all elements, something like .day, and then use that class in your code:

$('.day').click(function() {
 if ($(this).hasClass("active")){
 $(this).switchClass( "active", "inactive", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', true);
 } else {
 $(this).switchClass( "inactive", "active", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', false);
 }
 $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});

Another way would be:

$('#Monday, #Tuesday, #Wendnesday').click(function() {
 if ($(this).hasClass("active")){
 $(this).switchClass( "active", "inactive", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', true);
 } else {
 $(this).switchClass( "inactive", "active", 200, "easeInOutQuad" );
 $(this).parent().find('.miniTime').prop('disabled', false);
 }
 $(this).find('input').prop('checked', function( foo, oldValue ) {return !oldValue});
});