0
\$\begingroup\$

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});
});
\$\endgroup\$
2
  • 3
    \$\begingroup\$ 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? \$\endgroup\$
    – Marc B
    Mar 5 '15 at 18:48
  • 1
    \$\begingroup\$ 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. \$\endgroup\$ Mar 5 '15 at 19:01
2
\$\begingroup\$

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});
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy