Skip to main content
added 9 characters in body; edited title
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238

jQuery grouping Grouping similar jQuery functions

I want to group the two very similarssimilar jQuery functions ininto just one. Any idea?

HTML:HTML:

<input id="progress" type="text" class="spinner-input form-control" maxlength="3" readonly value="<?php echo $progreso['progress'] ?>">
<div class="spinner-buttons input-group-btn btn-group-vertical">                   
    <button id="plus" type="button" class="btn spinner-up btn-xs btn-info">                       
        <i class="icon-angle-up"></i>                    
    </button>                     
    <button id="minus" type="button" class="btn spinner-down btn-xs btn-info">                        
        <i class="icon-angle-down"></i>                     
    </button>                  
</div>

jQuery:jQuery:

$(document).on('click', '#plus', function(e){
    var progress = parseInt( $('#progress').val() ) + 5;
    if ( progress <= 100 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 100 );  
    };
});

$(document).on('click', '#minus', function(e){
    var progress = parseInt( $('#progress').val() ) - 5;
    if ( progress >= 0 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 0 );    
    };
});

jQuery grouping similar functions

I want to group the two very similars jQuery functions in just one. Any idea?

HTML:

<input id="progress" type="text" class="spinner-input form-control" maxlength="3" readonly value="<?php echo $progreso['progress'] ?>">
<div class="spinner-buttons input-group-btn btn-group-vertical">                   
    <button id="plus" type="button" class="btn spinner-up btn-xs btn-info">                       
        <i class="icon-angle-up"></i>                    
    </button>                     
    <button id="minus" type="button" class="btn spinner-down btn-xs btn-info">                        
        <i class="icon-angle-down"></i>                     
    </button>                  
</div>

jQuery:

$(document).on('click', '#plus', function(e){
    var progress = parseInt( $('#progress').val() ) + 5;
    if ( progress <= 100 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 100 );  
    };
});

$(document).on('click', '#minus', function(e){
    var progress = parseInt( $('#progress').val() ) - 5;
    if ( progress >= 0 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 0 );    
    };
});

Grouping similar jQuery functions

I want to group the two very similar jQuery functions into just one. Any idea?

HTML:

<input id="progress" type="text" class="spinner-input form-control" maxlength="3" readonly value="<?php echo $progreso['progress'] ?>">
<div class="spinner-buttons input-group-btn btn-group-vertical">                   
    <button id="plus" type="button" class="btn spinner-up btn-xs btn-info">                       
        <i class="icon-angle-up"></i>                    
    </button>                     
    <button id="minus" type="button" class="btn spinner-down btn-xs btn-info">                        
        <i class="icon-angle-down"></i>                     
    </button>                  
</div>

jQuery:

$(document).on('click', '#plus', function(e){
    var progress = parseInt( $('#progress').val() ) + 5;
    if ( progress <= 100 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 100 );  
    };
});

$(document).on('click', '#minus', function(e){
    var progress = parseInt( $('#progress').val() ) - 5;
    if ( progress >= 0 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 0 );    
    };
});
edited tags
Link
konijn
  • 34.4k
  • 5
  • 71
  • 267
Source Link

jQuery grouping similar functions

I want to group the two very similars jQuery functions in just one. Any idea?

HTML:

<input id="progress" type="text" class="spinner-input form-control" maxlength="3" readonly value="<?php echo $progreso['progress'] ?>">
<div class="spinner-buttons input-group-btn btn-group-vertical">                   
    <button id="plus" type="button" class="btn spinner-up btn-xs btn-info">                       
        <i class="icon-angle-up"></i>                    
    </button>                     
    <button id="minus" type="button" class="btn spinner-down btn-xs btn-info">                        
        <i class="icon-angle-down"></i>                     
    </button>                  
</div>

jQuery:

$(document).on('click', '#plus', function(e){
    var progress = parseInt( $('#progress').val() ) + 5;
    if ( progress <= 100 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 100 );  
    };
});

$(document).on('click', '#minus', function(e){
    var progress = parseInt( $('#progress').val() ) - 5;
    if ( progress >= 0 ) {
        $('#progress').val( progress );
    }
    else{
        $('#progress').val( 0 );    
    };
});